Jqgried树形列表

**************************************Jqgrid树列表***************************************function initGrid_test() {//必要字段：id,name,level,parent,isLeaf,expandedvar topicjson={"response": [{"id": "1", "name": "项目1","obj":{"score":"77"},"score": "88","pro": "10%","handle": "",percentage:10, level:0, parent:"", isLeaf:false, expanded:true },{"id": "1_1","name": "因子1","obj":{"score":"77"},"score": "88","pro": "20%","handle": "",percentage:20, level:1, parent:"1", isLeaf:false, expanded:true},{"id": "1_1_1","name": ">=1","obj":{"score":"77"},"score": "88","pro": "15%","handle": "",percentage:15, level:2, parent:"1_1", isLeaf:true, expanded:false},{"id": "1_1_2","name": ">=2","obj":{"score":"77"},"score": "88","pro": "90%","handle": "",percentage:90, level:2, parent:"1_1", isLeaf:true, expanded:false},{"id": "1_1_3","name": ">=3","obj":{"score":"77"},"score": "88","pro": "13%","handle": "",percentage:13, level:2, parent:"1_1", isLeaf:true, expanded:false},{"id": "1_2","name": "因子1","obj":{"score":"77"},"score": "88","pro": "43%","handle": "",percentage:43, level:1, parent:"1", isLeaf:false, expanded:true},{"id": "1_2_2","name": ">=8","obj":{"score":"77"},"score": "88","pro": "22%","handle": "",percentage:22, level:2, parent:"1_2", isLeaf:true, expanded:false},{"id": "2", "name": "项目2","obj":{"score":"77"},"score": "88","pro": "44%","handle": "",percentage:44, level:0, parent:"", isLeaf:false, expanded:true },{"id": "3", "name": "项目3","obj":{"score":"77"},"score": "88","pro": "66%","handle": "",percentage:66, level:0, parent:"", isLeaf:false, expanded:true },{"id": "4", "name": "项目4","obj":{"score":"77"},"score": "88","pro": "99%","handle": "",percentage:99, level:0, parent:"", isLeaf:false, expanded:true }]}jqGrid = jQuery("#jqGrid_table");jqGrid.jqGrid({datastr: topicjson,// 数据源url:'....'datatype: "jsonstring",//jsonstring 或 jsonheight: "auto",loadui: "disable",colNames: ['id','项目名称', '分值', '权重','百分比','操作'],//jqGrid的列显示名字colModel : [ //jqGrid每一列的配置信息。包括名字，索引，宽度,对齐方式.....{name: 'id', key: true, hidden:true},{name : 'name',index : 'name',editable : false,width: 220,editoptions : {readonly : true,size : 10},align:"left"},{name : 'score', width: 220,index : 'filesize',editable : true,editoptions : {size : 10},align:"left"},{name : 'pro',index : 'date',width: 220,editable : true,editoptions : {size : 10},align:"left"},{name: 'percentage',width: 200,index: 'percentage',editable: true,editoptions: {size: 30},align: "center",formatter: function (cellvalue, options, rowObject) {if (typeof (cellvalue) == "undefined") {return "";}var html = '<div class="u-progress lg" title="' + cellvalue + '%">' +'<div class="bar" style="width:' + cellvalue + '%"></div>' +'</div>';return html;}},{name : 'handle',width: 220,index : 'handle',editable : true,editoptions : {size : 10},align:"left",formatter: formatContext}],treeGrid: true,treeGridModel: "adjacency",ExpandColumn: "name",//展开的列****autowidth: true,rowNum: 10000,ExpandColClick: true,jsonReader: {repeatitems: false,root: "response"},onSelectRow: function(id){}}); }//注意要点： 1,必要字段：id,name,level,parent,isLeaf,expanded 2,ExpandColumn：展开的列 3,层级必须分明 3,引入css,不然前面的图标展示不会显示<!-- jqgrid树列表所需要的css --><link rel="stylesheet" href="${staticWebUrl}/jquery-ui-1.11.0-beta.2.custom/jquery-ui.css?vr=2019426" />

总结

以上是生活随笔为你收集整理的Jqgried树形列表的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。