zoukankan      html  css  js  c++  java
  • asp.net MVC中使用EasyUI Treegrid 树形网格

    引入CSS和JS

    <link href="~/Content/plugins/jquery-easyui-1.7.0/themes/default/easyui.css" rel="stylesheet">
    <link href="~/Content/plugins/jquery-easyui-1.7.0/themes/icon.css" rel="stylesheet">
    <script src="~/Content/plugins/jquery-easyui-1.7.0/jquery.min.js"></script>
    <script src="~/Content/plugins/jquery-easyui-1.7.0/jquery.easyui.min.js"></script> 

    前台核心代码

    <table id="tg" class="table easyui-treegrid" title="" style="100%;overflow-y:auto"></table> 
    <script type="text/javascript">
        $(function () {
            //加载树数据
            $('#tg').treegrid({
                rownumbers: true,
                animate: false,
                striped: false,
                fitColumns: true,
                scrollbarSize: 0,
                url: "/Home/GetRootList?keywords=null",
                singleSelect: false,
                checkOnSelect: true,
                selectOnCheck: true,
                loadMsg: "正在加载数据...",
                method: 'get',
                idField: 'Id',
                treeField: 'TreeName',
                showFooter: false,
                columns: [[
                    {
                        title: '节点名称',
                        field: 'TreeName',
                         380,
                        formatter: function (value, row, index) {
                            var drawingId = row.DrawingId;
                            if (row.DrawingLeave==6) {
                                return "<a title='预览' href="javascript:showFile('" + row.Id + "')">" + row.TreeName + "</a>";
                            } else {
                                return row.TreeName;
                            }
                        }
                    }
                ]],
                onLoadSuccess: function (row, data) {
                    console.log(data);
                },
                onBeforeSelect: function (row) {
                    if (selectType == 0) {
                        $('#tg').treegrid("unselectAll");//单选,选择之前清除已选择列表
                        return true;
                    }
                },
                onSelect: function (row) {
                      
                },
                onClickRow: function (row) {
                        
                },
                onDblClickRow: function (row) {
                      
                },
                onBeforeExpand: function (node) {
                    $('#tg').treegrid('options').url = '/Home/GetChirdList?Id=' + node.Id
                    return true;
                },
                rowStyler: function (row, rowindex) {
                    
                }
            });
            $('#tg').treegrid('resize', {
                height: document.body.clientHeight - 130,
            });
        });
     
    </script>

    后台代码

    /// <summary>
    /// 视图页
    /// </summary>
    /// <returns></returns>
    public ActionResult Index()
    {
        return View();
    }
    /// <summary>
    /// 首次加载跟节点,此处加载1,2级;1级展开,所有二级合并
    /// </summary>
    /// <returns></returns>
    public string GetRootList(string keywords)
    {
       var rootList = bll.GetList(keywords);//获取所有树形结构
       if (!string.IsNullOrEmpty(keywrods) && rootList.Count > 0) //如果搜索不为空,需将搜索到的一级节点parentid置为0
        {
            rootList[0].ParentId = 0;//搜索的结果集根节点不一定是0,此处需处理
        }
        var newList = rootList.Select(n => new
        {
            n.Id
            n.TreeName,
            state = n.parentId == 0 ? "open" : bll.GetAllList("parentId='" + n.Id + "'").Count > 0 ? "closed" : "open", //treeGrid关键字段,有子级文件夹图标,无子级文件图标并且没有展开合并符号
            n.Level,
            _parentId = n.parentId== 0 ? null : n.parentId.ToString(),//(必须):记得前面有“_” ,他是用来记录父级节点,没有这个属性,是没法展示父级节点 其次就是这个父级节点必须存在,不然信息也是展示不出来,在后台遍历组合的时候,如果父级节点不存在或为0时,此时 _parentId 应该不赋值。如果赋值 “0” 则显示不出来
            //checked是否选中(用于复选框)
            //iconCls 选项前面的图标,如果自己不设定,父级节点默认为文件夹图标,子级节点为文件图标
        });
     
        var result = Newtonsoft.Json.JsonConvert.SerializeObject(newList);
        result = "{ "total":" + newList.Count() + ","rows":" + result + "}";
        return result;
    }
    /// <summary>
    /// 根据选择的Id查询下一级节点
    /// </summary>
    /// <returns></returns>
    public string GetChirdList(int Id)
    {
        var rootList = bll.GetChridList(Id);
        var newList = rootList.Select(n => new
        {
            n.Id
            n.TreeName,
            state = bll.GetAllList("parentId='" + n.Id + "'").Count > 0 ? "closed" : "open", //有子级文件夹图标,无子级文件图标并且没有展开合并符号
            n.Level,
            _parentId = n.parentId== 0 ? null : n.parentId.ToString()
     
        });
       var rows = Newtonsoft.Json.JsonConvert.SerializeObject(newList);
       return rows; 
    }
  • 相关阅读:
    微信公众号-框架业务
    微信公众号-加解密数据demo坑
    JS进制转换,浮点数相加,数字判断
    lamp环境-编译安装
    批量解压目录下的文件
    设置用户sudo -s拥有root权限
    CentOS 6.5-默认没开启网络连接:开启网络连接
    检查一下是否安装了环境,安装则卸载
    负载均衡-多台机子session不起效:把php.ini中file改为memcache存储
    由json生成php配置文件
  • 原文地址:https://www.cnblogs.com/fengyeqingxiang/p/11018642.html
Copyright © 2011-2022 走看看