easyui_datagrid合并行单击某行选中所有

最新推荐文章于 2023-05-04 08:55:51 发布

weixin_30443075

最新推荐文章于 2023-05-04 08:55:51 发布

阅读量361

点赞数

CC 4.0 BY-SA版权

文章标签： javascript json ViewUI

原文链接：http://www.cnblogs.com/liuqiyun/p/6428539.html

本文介绍了一个使用DataGrid实现合并单元格的例子，并详细展示了如何通过JavaScript代码进行多行选择与取消选择的功能，以及如何在加载成功后合并指定列。

实现如下功能：

代码：

<table id="dg" class="easyui-datagrid" title="Merge Cells for DataGrid" style="width:700px;height:750px"
            data-options="
                rownumbers: true,
                singleSelect: false,
                iconCls: 'icon-save',
                url: '../datagrid/datagrid_data1.json?n='+Math.random(),
           method:'get',
           onLoadSuccess: onLoadSuccess,
           checkOnSelect:true,
           selectOnCheck:true,
           onCheck:onCheck,
           onUncheck:onUncheck
            ">
        <thead>
            <tr>
                <th data-options="field:'ck',checkbox:true"></th>
                <th data-options="field:'productid',width:100">Product</th>
                <th data-options="field:'itemid',width:80">Item ID</th>
                <th data-options="field:'listprice',width:80,align:'right'">List Price</th>
                <th data-options="field:'unitcost',width:80,align:'right'">Unit Cost</th>
                <th data-options="field:'attr1',width:240">Attribute</th>
                <th data-options="field:'status',width:60,align:'center'">Status</th>
            </tr>
        </thead>
    </table>
    <script type="text/javascript">
        //判断rowIndex是否被选中
        //调用方法：$("#dg").datagrid("isChecked", { rowIndex: rowIndex })
        $.extend($.fn.datagrid.methods, {
            isChecked: function (dg, param) {
                var flag = false;//是否选中
                var allRows = $(dg).datagrid('getChecked');   //获取所有被选中的行
                $.each(allRows, function (index,item) {
                    if (param.rowIndex == $(dg).datagrid('getRowIndex', item)) {
                        flag = true;
                        return false;//return false终止循环，return true,跳出循环，进入下一次循环，跟函数返回值无关
                    }
                })
                return flag;
            }
            })
        var index = '';
        function onCheck(rowIndex, rowData) {
            if (index == '') {
                index = rowIndex;
                var productid = rowData["productid"];
                var rows = $("#dg").datagrid("getRows");
                //alert($("#dg").datagrid("isChecked", { rowIndex: rowIndex }));
                for (var i = 0; i < rows.length; i++) {
                    if (rows[i]["productid"] == productid) {
                        $("#dg").datagrid("checkRow", i);
                    }
                }
                index = '';
            }
        }
        function onUncheck(rowIndex, rowData) {
            if (index == '') {
                index = rowIndex;
                var productid = rowData["productid"];
                var rows = $("#dg").datagrid("getRows");
                //alert($("#dg").datagrid("isChecked", { rowIndex: rowIndex }));
                for (var i = 0; i < rows.length; i++) {
                    if (rows[i]["productid"] == productid) {
                        $("#dg").datagrid("uncheckRow", i);
                    }
                }
                index = '';
            }
        }
        function onLoadSuccess(data){
            var merges = [{
                index: 1,
                rowspan: 3
            }];
            for(var i=0; i<merges.length; i++){
                $(this).datagrid('mergeCells',{
                    index: merges[0].index,
                    field: 'productid',
                    rowspan: merges[0].rowspan
                }).datagrid('mergeCells', {
                    index: merges[0].index,
                    field: 'ck',
                    rowspan: merges[0].rowspan
                });
            }
        }
    </script>