treegrid，可以展开的jqgrid树

2019-02-25 11:38:16 阅读：309 来源： 互联网

标签：treegrid handle jqgrid 展开 score false true id name

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>

标签：treegrid,handle,jqgrid,展开,score,false,true,id,name
来源： https://www.cnblogs.com/required/p/10430004.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

treegrid，可以展开的jqgrid树