jquery treegrid实例

前台jqurey代码
function organDatagrid(){
	$organ_treegrid  = $('#organ_treegrid').treegrid({
    url:ctx+'/petition/petition-info/organ-datagrid',
    fit:true,
    fitColumns:false,//自适应列宽
    striped:true,//显示条纹
    rownumbers:true,//显示行数
    nowrap : false,
    border : false,
    singleSelect:true,
    showFooter : true,
    remoteSort:false,//是否通过远程server对数据排序
/*  sortName:'orderNo',//默认排序字段
    sortOrder:'asc',//默认排序方式 'desc' 'asc' */
    idField : 'id',
    treeField:"name",
/*  frozenColumns:[[
        {field:'name',title:'机构名称',200},
        {field:'sysCode',title:'机构系统编码',120}
    ]], */
    columns:[[
        {field:'id',title:'主键',hidden:true,sortable:true,align:'right',80},
        {field:'name',title:'机构名称',400},
        {field:'pcount',title:'信訪数量',120},
        {field:'scale',title:'比例',120}
    ]]
   }).datagrid('showTooltip');
}


后台业务代码

	@RequestMapping(value = {"organ-datagrid"})
	@ResponseBody
	public Datagrid<Map> getPetitionOrgan(@RequestParam(value = "startTime", required = false)Date startTime,
			@RequestParam(value = "endTime", required = false)Date endTime) throws Exception {
		List<Map> list = null;
                //此处省略业务代码		
		Datagrid<Map> dg= new Datagrid<Map>(list.size(), list);
        return dg;
	}	


接收到的数据格式

{
  "total" : 20,
  "columns" : null,
  "rows" : [ {
    "id" : 2,
    "scale" : "58.62%",
    "pcount" : 17,
    "status" : 0,
    "_parentId" : null,
    "name" : "江西省烟草专卖局(公司)"
  }, {
    "id" : 22,
    "scale" : "17.24%",
    "pcount" : 5,
    "status" : 0,
    "_parentId" : 2,
    "name" : "赣州市烟草专卖局(公司)"
  }, {
    "id" : 40,
    "scale" : "0.0%",
    "pcount" : 0,
    "status" : 0,
    "_parentId" : 22,
    "name" : "章贡区烟草专卖局(分公司)"
  }, {
    "id" : 46,
    "scale" : "0.0%",
    "pcount" : 0,
    "status" : 0,
    "_parentId" : 22,
    "name" : "赣县烟草专卖局(分公司)"
  }, {
    "id" : 53,
    "scale" : "3.45%",
    "pcount" : 1,
    "status" : 0,
    "_parentId" : 22,
    "name" : "南康市烟草专卖局(分公司)"
  }, {
    "id" : 59,
    "scale" : "3.45%",
    "pcount" : 1,
    "status" : 0,
    "_parentId" : 22,
    "name" : "大余县烟草专卖局(分公司)"
  }, {
    "id" : 65,
    "scale" : "0.0%",
    "pcount" : 0,
    "status" : 0,
    "_parentId" : 22,
    "name" : "信丰县烟草专卖局(分公司)"
  }, {
    "id" : 72,
    "scale" : "10.34%",
    "pcount" : 3,
    "status" : 0,
    "_parentId" : 22,
    "name" : "上犹县烟草专卖局(分公司)"
  }, {
    "id" : 78,
    "scale" : "0.0%",
    "pcount" : 0,
    "status" : 0,
    "_parentId" : 22,
    "name" : "崇义县烟草专卖局(分公司)"
  }, {
    "id" : 84,
    "scale" : "0.0%",
    "pcount" : 0,
    "status" : 0,
    "_parentId" : 22,
    "name" : "安远县烟草专卖局(分公司)"
  }, {
    "id" : 91,
    "scale" : "0.0%",
    "pcount" : 0,
    "status" : 0,
    "_parentId" : 22,
    "name" : "龙南县烟草专卖局(分公司)"
  }, {
    "id" : 97,
    "scale" : "0.0%",
    "pcount" : 0,
    "status" : 0,
    "_parentId" : 22,
    "name" : "定南县烟草专卖局(分公司)"
  }, {
    "id" : 103,
    "scale" : "6.9%",
    "pcount" : 2,
    "status" : 0,
    "_parentId" : 22,
    "name" : "全南县烟草专卖局(分公司)"
  }, {
    "id" : 109,
    "scale" : "0.0%",
    "pcount" : 0,
    "status" : 0,
    "_parentId" : 22,
    "name" : "于都县烟草专卖局(分公司)"
  }, {
    "id" : 114,
    "scale" : "0.0%",
    "pcount" : 0,
    "status" : 0,
    "_parentId" : 22,
    "name" : "宁都县烟草专卖局(分公司)"
  }, {
    "id" : 121,
    "scale" : "0.0%",
    "pcount" : 0,
    "status" : 0,
    "_parentId" : 22,
    "name" : "兴国县烟草专卖局(分公司)"
  }, {
    "id" : 128,
    "scale" : "0.0%",
    "pcount" : 0,
    "status" : 0,
    "_parentId" : 22,
    "name" : "瑞金市烟草专卖局(分公司)"
  }, {
    "id" : 135,
    "scale" : "0.0%",
    "pcount" : 0,
    "status" : 0,
    "_parentId" : 22,
    "name" : "会昌县烟草专卖局(分公司)"
  }, {
    "id" : 141,
    "scale" : "0.0%",
    "pcount" : 0,
    "status" : 0,
    "_parentId" : 22,
    "name" : "寻乌县烟草专卖局(分公司)"
  }, {
    "id" : 147,
    "scale" : "0.0%",
    "pcount" : 0,
    "status" : 0,
    "_parentId" : 22,
    "name" : "石城县烟草专卖局(分公司)"
  } ]
}

dataGrid能够不须要用DataGrid类来构造,仅仅需返回list;treeGrid必须返回DataGrid类这种构造数据,才干有树形显现。
原文地址:https://www.cnblogs.com/llguanli/p/6796989.html