treegrid，可以展开的jqgrid树

效果图

 

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" onclick="edit(this)">编辑</span><span class="handle" onclick="deleteApply(this)">删除</span>';

    }

</script>