欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

MVC 表格按树状形式显示 jstree jqgrid

程序员文章站 2022-08-28 14:08:19
1. 界面顯示 2.前端 jqgrid 代码 //加载表格 function GetGrid() { var selectedRowIndex = 0; var $gridTable = $('#gridTable'); $gridTable.jqGrid({ url: "../../BaseMan ......

1. 界面顯示

MVC 表格按树状形式显示  jstree  jqgrid

2.前端 jqgrid 代码   

 //加载表格
    function getgrid() {
        var selectedrowindex = 0;
        var $gridtable = $('#gridtable');
        $gridtable.jqgrid({
            url: "../../basemanager/organize/gettreelistjson",
            datatype: "json",
            height: $(window).height() - 108.5,
            colmodel: [
                { label: '主键', name: 'organizeid', hidden: true },
                { label: "公司名称", name: "fullname", width: 300, align: "left", sortable: false },
                { label: "外文名称", name: "encode", width: 150, align: "left", sortable: false },
                { label: "中文名称", name: "shortname", width: 150, align: "left", sortable: false },
                { label: "公司性质", name: "nature", width: 100, align: "left", sortable: false },
                {
                    label: "成立时间", name: "foundedtime", width: 100, align: "left", sortable: false,
                    formatter: function (cellvalue, options, rowobject) {
                        return formatdate(cellvalue, 'yyyy-mm-dd');
                    }
                },
                { label: "负责人", name: "manager", width: 100, align: "left", sortable: false },
                { label: "经营范围", name: "businessscope", width: 200, align: "left", sortable: false },
                { label: "备注", name: "description", width: 200, align: "left", sortable: false }
            ],
            treegrid: true,
            treegridmodel: "nested",
            expandcolumn: "encode",
            rownum: "all",
            rownumbers: true,
            onselectrow: function () {
                selectedrowindex = $("#" + this.id).getgridparam('selrow');
            },
            gridcomplete: function () {
                $("#" + this.id).setselection(selectedrowindex, false);
            }
        });

3.后端controllers  

/// <summary>
        /// 机构列表 
        /// </summary>
        /// <param name="condition">查询条件</param>
        /// <param name="keyword">关键字</param>
        /// <returns>返回树形列表json</returns>
        [httpget]
        public actionresult gettreelistjson(string condition, string keyword)
        {
            var data = newobject<organizelogic>().getlistbycache().datas;
            if (!string.isnullorempty(condition) && !string.isnullorempty(keyword))
            {
                #region 多条件查询
                switch (condition)
                {
                    case "fullname":    //公司名称
                        data = data.treewhere(t => t.fullname.contains(keyword), "organizeid");
                        break;
                    case "encode":      //外文名称
                        data = data.treewhere(t => t.encode.contains(keyword), "organizeid");
                        break;
                    case "shortname":   //中文名称
                        data = data.treewhere(t => t.shortname.contains(keyword), "organizeid");
                        break;
                    case "manager":     //负责人
                        data = data.treewhere(t => t.manager.contains(keyword), "organizeid");
                        break;
                    default:
                        break;
                }
                #endregion
            }
            var treelist = new list<treegridentity>();
            foreach (organizeentity item in data)
            {
                treegridentity tree = new treegridentity();
                bool haschildren = data.count(t => t.parentid == item.organizeid) == 0 ? false : true;
                tree.id = item.organizeid.toconvertstring();
                tree.haschildren = haschildren;
                tree.parentid = item.parentid.tostring();
                tree.expanded = false;
                tree.entityjson = jsonhelper.tojson(item);
                treelist.add(tree);
            }
            return content(treelist.treejson());
        }

4.json 数据

 MVC 表格按树状形式显示  jstree  jqgrid