jqgrid实现子表格

来源：互联网发布：淘宝客服骂人怎么投诉编辑：程序博客网时间：2024/06/01 15:53

subGridRowExpanded ：当点击“+”展开子表格时，将触发此选项定义的事件方法；这时会自动创建一个div,在这个方法中可以获取到这个div的id和表格中该行的id
subGridRowColapsed ：当点击“-”收起子表格时，将触发此选项定义的事件方法；
在点击“-”时，子表格的div自动清除
在点击”+”时，也可以不去添加子表格，而去做别的自己需要的操作
html代码

<div class="panel-body"><!--定义外表格容器-->        <table id="list" style="heigth: 1000px"></table>        <div id="pager"></div></div>

js代码

$(function() {        //页面加载完成之后执行        pageInit(); //显示表格     });    function pageInit() { //创建jqGrid组件          jQuery("#list")                .jqGrid(                        {                            height : 400,                            url : "collectLine/json/all",//组件创建完成之后请求数据的url                            datatype : "json",//请求数据返回的类型。可选json,xml,txt                            colNames : [ 'id', '名称', '描述', '线路长度', '是否有效',                                    '目的地', '编辑' ],                            colModel : [ {                                name : 'id',                                index : 'id',                                width : 50,                                align : 'left'                            }, {                                name : 'name',                                index : 'name',                                width : 80,                                align : 'left'                            }, {                                name : 'remark',                                index : 'remark',                                width : 200,                                align : 'left'                            }, {                                name : 'length',                                index : 'length',                                width : 100,                                align : 'left'                            }, {                                name : 'isValid',                                index : 'isValid',                                formatter : validFormatter,                                width : 150,                                align : 'left'                            }, {                                name : 'destination.name',                                index : 'destination.name',                                width : 100,                                align : 'left'                            }, {                                name : 'edit',                                index : 'edit',                                width : 150,                                align : 'left'                            } ],                            rowNum : 10,//一页显示多少条  传后台                             rowList : [ 10, 20, 30 ],//可供用户选择一页显示多少条                            pager : '#pager',//表格页脚的占位符(一般是div)的id                            sortname : 'name',//初始化的时候排序的字段  默认的排序列 传后台                             sortorder : "asc",//排序方式,可选desc,asc                            mtype : "post",//向后台请求数据的ajax的类型。可选post,get                            viewrecords : true,                            jsonReader : {                                root : "content", //数据                                page : " ", //当前页                                total : "totalPages", //  总页数                                records : "totalElements",//从服务器端返回的记录数                                repeatitems : false,                                id : "id"                            },                            gridComplete : function() { // 数据加载完成后 添加 采购按钮                                 var ids = jQuery("#list").jqGrid('getDataIDs');                                for (var i = 0; i < ids.length; i++) {                                    var id = ids[i];                                    var editBtn = "<div class='btnBox'> "                                            + "<button   class='btn btn-primary' onclick='editLine("                                            + id                                            + ")'>编辑</button>    "                                            + "<button  class='btn btn-primary' onclick='deleteLine("                                            + id + ")'>删除</button></div>";                                    $("#list").jqGrid('setRowData', id, {                                        edit : editBtn                                    });                                }                            },                            caption : "",//表格的标题名字                            subGrid : true,//开启子表格支持                             //子表格的id；当子表格展开的时候，在主表格中会创建一个div元素用来容纳子表格，subgrid_id就是这个div的id                            subGridRowExpanded : function(subgrid_id, row_id) {//子表格容器的id和需要展开子表格的行id                                bindSubGrid(subgrid_id, row_id);                            }                        });        /*创建jqGrid的操作按钮容器*/        /*可以控制界面上增删改查的按钮是否显示*/        jQuery("#list").jqGrid('navGrid', '#list', {            edit : false,            add : false,            del : false,            search : false        });    }    function bindSubGrid(subgrid_id, collectLineId) {        var subgrid_table_id;        subgrid_table_id = subgrid_id + "_t"; // (3)根据subgrid_id定义对应的子表格的table的id          var subgrid_pager_id;        subgrid_pager_id = subgrid_id + "_pgr" // (4)根据subgrid_id定义对应的子表格的pager的id         // (5)动态添加子报表的table和pager          $("#" + subgrid_id)                .html(                        "<table id='"+subgrid_table_id+"' class='scroll'></table><div id='"+subgrid_pager_id+"' class='scroll'></div>");        // (6)创建jqGrid对象          $("#" + subgrid_table_id)                .jqGrid(                        {                            url : 'collectLinePoint/json/all/' + collectLineId, // (7)子表格数据对应的url，注意传入的contact.id参数                              datatype : "json",                            colNames : [ 'id', '图片', '名称', '描述', '排序', '纬度',                                    '经度', '海拔', '编辑' ],                            colModel : [ {                                name : "id",                                index : "id",                                width : 50,                                key : true                            }, {                                name : "picUrl",                                index : "picUrl",                                formatter : picFormatter,                                width : 100                            }, {                                name : "name",                                index : "name",                                width : 80,                                align : "left"                            }, {                                name : "remark",                                index : "remark",                                width : 80,                                align : "left"                            }, {                                name : "sort",                                index : "sort",                                width : 50,                                align : "left"                            }, {                                name : "altitude",                                index : "altitude",                                width : 80,                                align : "left"                            }, {                                name : "longitude",                                index : "longitude",                                width : 80,                                align : "left"                            }, {                                name : "latitude",                                index : "latitude",                                width : 80,                                align : "left"                            }, {                                name : "edit",                                index : "edit",                                width : 150                            } ],                            rowNum : 10,                            rolList : [ 10, 20, 30 ],                            pager : subgrid_pager_id,                            mtype : "post",                            viewrecord : true,                            jsonReader : {                                root : "content", //数据                                page : "", //当前页                                total : "totalPages", //  总页数                                records : "totalElements",//从服务器端返回的记录数                                repeatitems : false,                                id : "id"                            },                            gridComplete : function() { // 数据加载完成后 添加 采购按钮                                 var ids = jQuery("#" + subgrid_table_id)                                        .jqGrid('getDataIDs');                                for (var i = 0; i < ids.length; i++) {                                    var id = ids[i];                                    var editBtn = "<div class='btnBox'> "                                            + "<button   class='btn btn-primary' onclick='editPoint("                                            + id                                            + ")'>编辑</button>    "                                            + "<button  class='btn btn-primary' onclick='deletePoint("                                            + subgrid_table_id + "," + id                                            + ")'>删除</button></div>";                                    $("#" + subgrid_table_id).jqGrid(                                            'setRowData', id, {                                                edit : editBtn                                            });                                }                            },                        });    }

1 0