**************************************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树形列表的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。