1. 程式人生 > >easyui 可編輯datagrid 範例 親測有效

easyui 可編輯datagrid 範例 親測有效

<%@ 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>