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>