easyui 可編輯datagrid 範例 親測有效
阿新 • • 發佈：2019-01-30
<%@ page language="java" import="java.util.*" pageEncoding="utf-8" contentType="text/html; charset=utf-8"%> <!DOCTYPE html> <html> <head> <title>測試報表</title> <meta charset="UTF-8"> <link rel="stylesheet" type="text/css" href="../../easyui/themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="../../easyui/themes/icon.css"> <link rel="stylesheet" type="text/css" href="../../easyui/themes/color.css"> <script type="text/javascript" src="../../easyui/jquery.min.js"></script> <script type="text/javascript" src="../../js/jquery-1.7.1.js"></script> <script type="text/javascript" src="../../easyui/jquery.easyui.min.js"></script> <script type="text/javascript" src="../../easyui/locale/easyui-lang-zh_CN.js"></script> <script type="text/javascript" src="../../js/print.js"></script> <style type="text/css"> html,body { height: 100%; width: 100%; margin: 0 auto; padding: 0; font-family: "宋體"; } </style> </head> <body> <div> @* 定義table *@ <table id ="dg" class="easyui-datagrid" style="width: auto; height: auto;" title="企業經營管理人才類別情況統計表2" data-options=" url:'/EnterpriseManagement2/FillData', fitColumns:true, singleSelect:true, pageSize:10, iconCls:'icon-edit', method:'get', onClickCell:onClickCell" "> @*複雜表頭的處理，合併單元格*@ <thead> <tr> <th rowspan="2">專案</th> <th rowspan="2">合計</th> <th rowspan="2">女士</th> <th colspan="5">學歷</th> <th colspan="6">年齡</th> <th rowspan="2">自主創業</th> <th rowspan="2">再就業人數</th> <th rowspan="2">擁有專利人數</th> <th rowspan="2">擁有執業資格人數</th> </tr> <tr> <th >研究生</th> <th >大學本科</th> <th >大學專科</th> <th >中專</th> <th >高中及以下</th> <th >35歲以下</th> <th >36-40歲</th> <th >41-45歲</th> <th >46-50歲</th> <th >51-54歲</th> <th >55歲以上</th> </tr> <tr> <th data-options="field:'sumID',width:137,align:'center'">甲</th> <th data-options="field:'one',width:70,align:'center',editor:'text'">1</th> <th data-options="field:'two',width:70,align:'center',editor:'text'">2</th> <th data-options="field:'three',width:70,align:'center',editor:'text'">3</th> <th data-options="field:'four',width:70,align:'center',editor:'text'">4</th> <th data-options="field:'five',width:70,align:'center',editor:'text'">5</th> <th data-options="field:'six',width:70,align:'center',editor:'text'">6</th> <th data-options="field:'seven',width:70,align:'center',editor:'text'">7</th> <th data-options="field:'eight',width:70,align:'center',editor:'text'">8</th> <th data-options="field:'night',width:70,align:'center',editor:'text'">9</th> <th data-options="field:'ten',width:70,align:'center',editor:'text'">10</th> <th data-options="field:'eleven',width:70,align:'center',editor:'text'">11</th> <th data-options="field:'twelve',width:70,align:'center',editor:'text'">12</th> <th data-options="field:'thirteen',width:70,align:'center',editor:'text'">13</th> <th data-options="field:'fourteen',width:70,align:'center',editor:'text'">14</th> <th data-options="field:'fifteen',width:70,align:'center',editor:'text'">15</th> <th data-options="field:'sixteen',width:85,align:'center',editor:'text'">16</th> <th data-options="field:'seventeen',width:110,align:'center',editor:'text'">17</th> </tr> </thead> <tr> <td data-options="field:'seventeen',width:110,align:'center',editor:'text'" >123</td> <td data-options="field:'seven',width:110,align:'center',editor:'text'" >123</td> </tr> <tr> <td data-options="field:'seventeen',width:110,align:'center',editor:'text'" >123</td> <td data-options="field:'seven',width:110,align:'center',editor:'text'" >123</td> </tr> </table> @* 可編輯表格單機觸發*@ <script type="text/javascript"> $.extend($.fn.datagrid.methods, { editCell: function (jq, param) { return jq.each(function () { var opts = $(this).datagrid('options'); var fields = $(this).datagrid('getColumnFields', true).concat($(this).datagrid('getColumnFields')); for (var i = 0; i < fields.length; i++) { var col = $(this).datagrid('getColumnOption', fields[i]); col.editor1 = col.editor; if (fields[i] != param.field) { col.editor = null; } } $(this).datagrid('beginEdit', param.index); for (var i = 0; i < fields.length; i++) { var col = $(this).datagrid('getColumnOption', fields[i]); col.editor = col.editor1; } }); } }); var editIndex = undefined; function endEditing() { if (editIndex == undefined) { return true } if ($('#dg').datagrid('validateRow', editIndex)) { $('#dg').datagrid('endEdit', editIndex); editIndex = undefined; return true; } else { return false; } } function onClickCell(index, field) { if (endEditing()) { $('#dg').datagrid('selectRow', index) .datagrid('editCell', { index: index, field: field }); editIndex = index; } } </script> </div> </body> </html>
