jqGrid 树形列表

js代码

$(function(){
    $("#jq-grid").jqGrid({  
        treeGrid: true,  
        treeGridModel: 'adjacency',   // treeGrid模式，跟json元数据有关  
        ExpandColumn : 'menuName',    // 一般设置第一行
        ExpandColClick : true,        // 是否可以点击
        url: '地址?t='+Math.random(),  // 获取数据url
        datatype: 'json',  
        colNames:['主键','菜单名称','菜单路径','对应权限','操作'],      
        colModel:[      
            {name:'code',index:'code', hidden:true},      
            {name:'menuName',index:'menuName', width:"500%"},      
            {name:'actionUrl',index:'actionUrl', width:"300%"},      
            {name:'roleId',index:'roleId', width:"200%"},
            // 自定义按钮，显示在table的最后一栏
            {name:'caozuo',index:'caozuo', width:"200%" , align:'center',
                formatter: function (cellvalue, options, rowObject) {  
                    var buttons = "";
                    buttons += "<button href=\"#\" class=\"ui-button ui-corner-all ui-widget\" onclick=\"bianji('"+options.rowId+"')\">编辑</button>";
                    // 判断是有还有子菜单，如果有子菜单多生成一个添加子菜单按钮
                    if(!rowObject.isLeaf){
                        buttons += "&nbsp;<button href=\"#\" class=\"ui-button ui-corner-all ui-widget\" onclick=\"tianjia('"+options.rowId+"')\">添加子菜单</button>";
                    }
                return  buttons;
                }   
            } 
         ],  
        pager:"#gridPager",     // 显示分页div的id 
        viewrecords: true,      // 是否显示信息条数
        jsonReader: {           // 设置读取数据时的字段
             root: "rows",      // json中代表实际模型数据的入口  
             page: "nowPage",   // json中代表当前页码的数据  
             total: "total",    // json中代表页码总数的数据  
             records: "records", // json中代表数据行总数的数据  
             repeatitems: false, // 如果设为false，则jqGrid在解析json时，会根据name来搜索对应的数据元素 
             id: "code"          // 设置rowid
        },      
        treeReader : {           //设置树形显示时4个关键字段对应的返回数据字段
          level_field: "level",      // 属性层级
          parent_id_field: "parent", //父级rowid 
          leaf_field: "isLeaf",      //是否还有子级菜单
          expanded_field: "expanded" //是否加载完毕
        },  
        caption: "菜单管理",     
        mtype: "POST",  
        height: "auto",    // 设为具体数值则会根据实际记录数出现垂直滚动条  
        rowNum : "-1",     // 显示全部记录  
        shrinkToFit:false  // 控制水平滚动条   
     }); 
     // 自定义jq按钮
    $("#jq-grid").jqGrid("navGrid", "#gridPager", {  
        addfunc : AddOrModifyBtn,          // (1) 点击添加按钮  
        editfunc : AddOrModifyBtn,         // (2) 点击编辑按钮 
        delfunc : Deleting,                // (3) 点击删除按钮 
        alerttext : "请选择需要操作的数据行!"  // (4) 当未选中任何行而点击编辑、删除、查看按钮时，弹出的提示信息  
    }); 
});

html页面代码

          <table id="jq-grid"></table> 
          <div id="gridPager"></div>