Easyui Datagrid相同连续列合Demo(二)

效果图:

html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Merge Cells for DataGrid - jQuery EasyUI Demo</title>
    <link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="../../themes/icon.css">
    <link rel="stylesheet" type="text/css" href="../demo.css">
    <script type="text/javascript" src="../../jquery.min.js"></script>
    <script type="text/javascript" src="../../jquery.easyui.min.js"></script>
    <script type="text/javascript" src="../../extends.js"></script>
</head>
<body>
    <h2>Merge Cells for DataGrid</h2>
    <p>Cells in DataGrid body can be merged.</p>
    <div style="margin:20px 0;"></div>
    <table class="easyui-datagrid" id="dg" title="Merge Cells for DataGrid" style="width:700px;height:250px"
            data-options="
                rownumbers: true,
                singleSelect: true,
                iconCls: ‘icon-save‘,
                data:qyData,
                method: ‘get‘,
                onLoadSuccess: onLoadSuccess
            ">
        <thead>
            <tr>
                <th data-options="field:‘productid‘,width:100">Product</th>
                <th data-options="field:‘productname‘,width:80">ProductName</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>
    <input type="button" value="合并" id="mergeCells" onclick="hb()">
    <script type="text/javascript">
       var qyData = {"total":11,"rows":[

                {"productid":"d1","productname":"p1","unitcost":10.00,"status":"P","listprice":36.50,"attr1":"Large","itemid":"EST-1"},
                {"productid":"d1","productname":"p1","unitcost":10.00,"status":"P","listprice":18.50,"attr1":"Spotted Adult Female","itemid":"EST-10"},
                {"productid":"d1","productname":"p2","unitcost":10.00,"status":"P","listprice":38.50,"attr1":"Venomless","itemid":"EST-11"},
                {"productid":"d2","productname":"p2","unitcost":12.00,"status":"P","listprice":26.50,"attr1":"Rattleless","itemid":"EST-12"},
                {"productid":"d2","productname":"p2","unitcost":12.00,"status":"P","listprice":35.50,"attr1":"Green Adult","itemid":"EST-13"},
                {"productid":"d2","productname":"p2","unitcost":12.00,"status":"P","listprice":158.50,"attr1":"Tailless","itemid":"EST-14"},
                {"productid":"d3","productname":"p3","unitcost":14.00,"status":"P","listprice":83.50,"attr1":"With tail","itemid":"EST-15"},
                {"productid":"d3","productname":"p3","unitcost":14.00,"status":"P","listprice":23.50,"attr1":"Adult Female","itemid":"EST-16"},
                {"productid":"d5","productname":"p5"},
                {"productid":"d4","productname":"p2","unitcost":10.00,"status":"P","listprice":89.50,"attr1":"Adult Male","itemid":"EST-17"},
                {"productid":"d4","productname":"p2","unitcost":10.00,"status":"P","listprice":63.50,"attr1":"Adult Male","itemid":"EST-18"}
            ]}

        var jcData = [
            {"unitcost":10.00,"status":"P","listprice":36.50,"attr1":"Large","itemid":"EST-1"},
            {"unitcost":10.00,"status":"P","listprice":18.50,"attr1":"Spotted Adult Female","itemid":"EST-10"},
            {"unitcost":10.00,"status":"P","listprice":38.50,"attr1":"Venomless","itemid":"EST-11"},
            {"unitcost":12.00,"status":"P","listprice":26.50,"attr1":"Rattleless","itemid":"EST-12"}
        ]

        function onLoadSuccess(data){
            $(this).datagrid("autoMergeCellAndCells",[‘productid‘,‘productname‘]);

        }

        function hb(){
            var id = "d5";
            var data = $("#dg").datagrid(‘getData‘);
            var rows = data.rows;
            var total = data.total;
            var qFileds = [‘productid‘,‘productname‘];
            var qrow = {};
            var n = null;
            var d = 0;
            for(var i = 0;i<rows.length;i++){
               if(rows[i][qFileds[0]] == id){
                 if(n == null)  n = i;
                 d++;
               }
            }
            for(var i = 0;i<qFileds.length;i++){
                qrow[qFileds[i]] = rows[n][qFileds[i]];
            }
            var r = null;
            for(var i = 0;i<jcData.length;i++){
              //Array.prototype.push.apply(jcData[i], qrow);  //数组追加
              jcData[i] = $.extend({}, jcData[i],qrow);//json对象追加
              if(i == 0){
                 r = rows.splice(n,d,jcData[i]);//从n个位置,开始删除d个,并追加jcData
              }else{
                 r = rows.splice(n,0,jcData[i]);
              }
            }
            total = total - d + jcData.length;
            $("#dg").datagrid(‘loadData‘,{total:total,rows:rows})
        }
    </script>
</body>
</html>
时间: 2024-11-02 07:53:57

Easyui Datagrid相同连续列合Demo(二)的相关文章

Easyui Datagrid相同连续列合Demo之三

效果图: html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Merge Cells for DataGrid - jQuery EasyUI Demo</title> <link rel="stylesheet" type="text/css" href="../../themes

EasyUI datagrid动态添加列

任务描述:根据用户选择时间段,生成列数据,如图 一.先定义好datagrid固定的数据列 <script type="text/javascript"> $(document).ready(function () { $("#td_Radio").datagrid({ striped: true, border: true, iconCls: 'icon-edit', //图标 singleSelect: true, autoRowHeight: tru

easyui datagrid 表格组件列属性formatter和styler使用方法

明确单元格DOM结构 要想弄清楚formatter和styler属性是怎么工作的,首先要弄清楚datagrid组件内容单元格的DOM接口,注意,这里指的是内容单元格,不包括标题单元格,标题单元格的结构有所区别.我们所有内容单元格的默认DOM结构如下: 1 2 3 4 5 <td field="code">     <div style="text-align:left" class="datagrid-cell datagrid-cell

Easyui datagrid 显示隐藏列

html: <div style="float: left; width: 1450px; height:auto;  "> <table id="List" class="easyui-datagrid" title="基站信息列表" width="1450px" style="height:580px;" data-options="rownumbers:

EasyUI DataGrid动态修改列标题

var option = $('#tt').datagrid("getColumnOption", "列名") option.title = "新的列名"; $('#tt').datagrid(); 其实就是先获取到列的数据信息,修改,重置. 看下官方的说明,如下,

easyui datagrid自定义按钮列,即最后面的操作列

在很多时候我们要在表格的最后添加一列操作列,easyUI貌似没有提供种功能,不过没关系,我们可以自定义来实现首先是HTML部分 <table id="tt" class="easyui-datagrid" style="width:100%;height:554px"             singleSelect="false"              fitColumns="true"    

easyui datagrid editor 特定列disabled

//编辑表格   function editRow(rowIndex) {       $('#tt').datagrid('cancelEdit', lastIndex);       $('#tt').datagrid('beginEdit', rowIndex);       lastIndex = rowIndex;       $('#tt').datagrid('getEditor', { index: rowIndex, field: 'VAL_NAME' }).disabled(

easyui dataGrid 动态添加列

其实很简单.新手创作,不好勿喷.jsp页面: 1 <script> 2 $(function () { 3 4 $.getJSON('${pageContext.request.contextPath}/resources/json/datagrid_data.json',function(result){ 5 var columns=new Array(); 6 $.each(result.headers[0], function(i, field){ 7 var column={}; 8

EasyUI datagrid 动态绑定列

查了很多资料,有点乱 首先声明一下这里必须要用easyui1.3.1 不多说直接上代码: 首先打开jquery.easyui.min.js,查找_53b() 找到下面的代码 function _53b(){ var _53c=opts.loader.call(_538,_53a,function(data){ setTimeout(function(){ $(_538).datagrid("loaded"); },0); _4b1(_538,data); setTimeout(func