效果图

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>