MiniUI——TreeGrid懒加载

来源：互联网发布：手机淘宝看不了购物车编辑：程序博客网时间：2024/05/15 18:12

首先看，前端treegrid的属性配置：

 <div id="boBaseInfo" class="mini-treegrid" style="width: 100%;height: 600px"         url="/BoInfoManage/GetBoByBot?bot=地质层位" showtreeicon="true" showcheckbox="true"         onnodeclick="treeNodeClick" checkrecursive="false"         treecolumn="taskname" idfield="ID" resultastree="false">        <div property="columns">            <div type="indexcolumn" width=5%>序号</div>            <div name="taskname" field="Name" width=25%>业务对象</div>            <div field="BOAlias" width=10%>对象别名</div>            <div field="SID" width=8%>标准编码</div>            <div field="SpaceLocationType" width=8%>坐标类型</div>            <div field="OrderIndex" width=8%>排序序号</div>            <div field="CreatedBy" width=8%>创建人</div>            <div field="SourceDB" width=10%>数据库来源</div>            <div field="SourceTable" width=10%>表来源</div>            <div field="Remark" width=10%>备注</div>        </div>    </div></div>

注意哦，相比较一次加载的树表，这里少了parentfield属性

然后呢，就是树的加载方式一定需要按一定的格式和规则进行处理

treegrid加载指向的URL的具体实现如下：

  /// <summary>        /// 获得指定bot的业务对象信息        /// </summary>        /// <param name="bot"></param>        /// <returns></returns>        public JsonResult GetBoByBot(string bot)        {            var id = Request["ID"];            if (String.IsNullOrEmpty(id)) id = null;            //获得下一级节点            var result = _service.GetBoByBot(bot, id);            //判断节点，是否有子节点。如果有，则处理isLeaf和expanded。            for (int i = 0, l = result.Count; i < l; i++)            {                var node = result[i];               <span style="color:#ff6666;"> node.isLeaf = true;                node.expanded = true;</span>                var nodeId = node.ID.ToString();                var result2 = _service.GetBoByBot(bot, nodeId);                if (result2.Count > 0)                {                    node.isLeaf = false;                    node.expanded = false;                }            }            return Json(result, JsonRequestBehavior.AllowGet);        }

注意这里返回的json数据中。必须包含两个字段 isleaf和expanded，用来控制懒加载，只有点击节点的时候该节点才会展开，isleaf用来控制树节点的图标样式

下面是定义的需要返回的模型

  public class BoBaseInfoModel    {        public Guid ID { get; set; }        public Guid? PID { get; set; }        public string Name { get; set; }        /// <summary>        /// 是否为叶子节点        /// </summary>        public bool isLeaf { get; set; }        //是否展开        public bool expanded { get; set; }    }

一定需要加两个字段，记住就可以了。

另外查看miniui的树懒加载的demo使用hash表来存储返回的节点参数信息的，这里采用的是模型。经过试验也可以实现。以后就可以采用这种方式来实现数的懒加载。

接下来看一下效果吧！

0 0