当前位置: 移动技术网 > IT编程>开发语言>.net > MVC 表格按树状形式显示 jstree jqgrid

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

2019年08月01日  | 移动技术网IT编程  | 我要评论

花样少女是多大,杜苹,t6t8游戏网

1. 界面顯示

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 数据

 

 

如对本文有疑问,请在下面进行留言讨论,广大热心网友会与你互动!! 点击进行留言回复

相关文章:

验证码:
移动技术网