easyUi DataGrid

1. DataGrid
原文地址：http://www.cnblogs.com/gwazy/archive/2012/11/19/2778000.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="keywords" content="jquery,ui,easy,easyui,web">
    <meta name="description" content="easyui help you build your web page easily!">
    <title>jQuery EasyUI Demo</title>
    <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/icon.css">
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
    <script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
    <script>
    $(function () {
        $('#datalist').datagrid({
            title: '三项岗位人员统计',
            iconCls: 'icon-save',
            singleSelect: true,
             700,
            height: 350,
            nowrap: false,
            fit: true,
            striped: false,
            url: '/Provider/HandlerQualificationsP.ashx?method=threet&dept_id=000001',
            remoteSort: false,
            idField: 'DicQualificationID',
            
            columns: [[
                   { field: 'title1', title: '资格证名称',  120, align: 'center' },
                   { field: 'title2', title: '资格证名称',  120, align: 'center' },
                   { field: 'zgzname', title: '资格证名称',  120, align: 'center' },
                   { field: 'rowdata1', title: '资格证名称',  120, align: 'center' }
                ],[{ field: 'title1', title: '资格证名称',  120, align: 'center' }]],
            
            rownumbers: true,
            onLoadSuccess: function (rowData) {
 
                var merges2 = [{
                    field:'title1',
                    index: 0,
                    colspan: 2,
                    rowspan: 2
                },
                { 
                    index: 2,
                    field: 'title1',
                    rowspan:4
                },
                  {
                    index: 7,
                    field: 'title1',
                    rowspan:9
                },
                {
                    index: 2,
                    field: 'title2',
                    rowspan: 2
                },
                {
                    index: 4,
                    field: 'title2',
                    rowspan: 2
                }
                ];
 
 
                    for (var i = 0; i < merges2.length; i++)
                        $('#datalist').datagrid('mergeCells', {
                            index: merges2[i].index,
                            field: merges2[i].field,
                            colspan: merges2[i].colspan,
                            rowspan: merges2[i].rowspan
                        });
  
            },
            toolbar: [{
                id: 'btnadd',
                text: '添加',
                iconCls: 'icon-add',
                handler: function () {
                    DicAdd()
                }
            }, '-', {
                id: 'btncut',
                text: '修改',
                iconCls: 'icon-cut',
                handler: function () {
                    DicEdit()
                }
            }, '-', {
                id: 'btnsave',
                text: '删除',
 
                iconCls: 'icon-remove',
                handler: function () {
                    delData();
                }
            }]
        });
 
    });
　　
    </script>
</head>
<body>
    <h1>Merge Cells for DataGrid</h1>
    
    <table id="datalist" title="Merge Cells" style="550px;height:250px"
    
    </table>
    
</body>
</html>