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>