jqgrid实现子表格

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='editItem("
                                            + id
                                            + ")'>编辑</button>    "
                                            + "<button  class='btn btn-primary' onclick='deleteItem("
                                            + subgrid_table_id + "," + id
                                            + ")'>删除</button></div>";
                                    $("#" + subgrid_table_id).jqGrid(
                                            'setRowData', id, {
                                                edit : editBtn
                                            });
                                }
                            },
                        });

    }

    /*根据 id删除一条记录*/
function deleteItem(subgrid_table_id, id) {

    var r = confirm("确认要删除吗?"); //确认框的字
    if (r == true) {
        $.ajax({
            async : false,
            cache : false,
            type : 'POST',

            url : "DRWorkDivision/delete/" + id,
            error : function() {
                alert("失败");
            },
            success : function(data) {
                $("#" + subgrid_table_id.id).trigger("reloadGrid");

            }
        });

    } else {

    }

}

方法deleteItem()中,把子表格的id当做参数,但是在接收参数时,参数是一个HTMLTableElememt,通过subgrid_table_id.id获取表格id

posted on 2017-01-19 15:54  dreamstar  阅读(295)  评论(0编辑  收藏  举报