效果圖

?

html部分

<div class="padding20 bgWhite marginTop20">
<div class="cus-grid row" id="grid-wrap">
<div class="col-lg-12">
<table id="list2"></table>
<div id="pager2"></div>
</div>
</div>
</div>

js部分
<script>

$(document).ready(function(){
var topicjson={
"response": [

{"id": "1", "name": "項目1","score": "88","pro": "66.6%","handle": "", level:"0", parent:"", isLeaf:false, expanded:true, loaded:true },
{"id": "1_1","name": "因子1","score": "88","pro": "66.6%","handle": "", level:"1", parent:"1", isLeaf:false, expanded:true, loaded:true},
{"id": "1_1_1","name": ">=10","score": "88","pro": "66.6%","handle": "", level:"2", parent:"1_1", isLeaf:true, expanded:false, loaded:true},
{"id": "1_1_2","name": ">=8","score": "88","pro": "66.6%","handle": "", level:"2", parent:"1_1", isLeaf:true, expanded:false, loaded:true},
{"id": "1_2","name": "因子1","score": "88","pro": "66.6%","handle": "", level:"1", parent:"1", isLeaf:false, expanded:true, loaded:true},
{"id": "1_2_2","name": ">=8","score": "88","pro": "66.6%","handle": "", level:"2", parent:"1_2", isLeaf:true, expanded:false, loaded:true},
{"id": "2", "name": "項目2","score": "88","pro": "66.6%","handle": "", level:"0", parent:"", isLeaf:false, expanded:true, loaded:true },
{"id": "3", "name": "項目3","score": "88","pro": "66.6%","handle": "", level:"0", parent:"", isLeaf:false, expanded:true, loaded:true },
{"id": "4", "name": "項目4","score": "88","pro": "66.6%","handle": "", level:"0", parent:"", isLeaf:false, expanded:true, loaded:true }

]
},
grid;

var lastsel;
grid = jQuery("#list2");
grid.jqGrid({
datastr: topicjson,
datatype: "jsonstring",
height: "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 : 'handle',width: 220,index : 'handle',editable : true,editoptions : {size : 10},align:"left",
formatter: formatContext
}

],
treeGrid: true,
pager : '#pager2',//表格頁腳的占位符(一般是div)的id
treeGridModel: "adjacency",
ExpandColumn: "name",
treeIcons: {leaf:'ui-icon-document-b'},
// caption: "jqGrid Demos",
//autowidth: true,
rowNum: 10000,
//ExpandColClick: true,
jsonReader: {
repeatitems: false,
root: "response"
},
onSelectRow: function(id){
if(id && id!==lastsel){
grid.jqGrid('restoreRow',lastsel);
// grid.jqGrid('editRow',id,true);
lastsel=id;
}
}
});
});
//創建layer彈幕層
//格式化表格

function formatContext( cellvalue, options, rowObject ){
var id = options.rowId;
return '<span class="handle" οnclick="edit(this)">編輯</span><span class="handle" οnclick="deleteApply(this)">刪除</span>';

}

</script> ?

?

轉載于:https://www.cnblogs.com/required/p/10430004.html

總結

以上是生活随笔為你收集整理的treegrid，可以展开的jqgrid树的全部內容，希望文章能夠幫你解決所遇到的問題。

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