前言
jQuery EasyUI是一組基於jQuery的UI 插件集合體，而jQuery EasyUI可以打造出功能更加豐富且美觀的UI界面。開發者不需要了解復雜的javascript和css樣式，只需要了解html標簽。
一、 easy-ui基本知識
1、 easy-ui引用js順序詳解
引用Jquery的js文件：
<script src="jquery-easyui-1.3.4/jquery-1.8.0.min.js" type="text/javascript"></script>
引用Easy UI的Js文件：
<script src="jquery-easyui-1.3.4/jquery.easyui.min.js" type="text/javascript"></script>
導入Easy UI的圖標Css文件：
<link href="jquery-easyui-1.3.4/themes/icon.css" rel="stylesheet" type="text/css" />
引用Easy UI的國際化文件 以下為讓它顯示中文：
<scriptsrc="jquery-easyui-1.3.4/locale/easyui-lang-zh_CN.js" type="text/javascript"></script>
頁面上加上UTF-8編碼 防止jquery.easyui.min.js 內容亂碼：
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
2 easy-ui基本控件
利用easy-ui官方網站上的demo學習，我們可以快速掌握模塊開發與設計，了解代碼編寫方式等。
Easy-ui的官方網站：
其官方網站提供了詳細的Demo和源碼，便於前端設計者查找和學習，因是外國網站，所以訪問不是很順暢，要把DNS改為：首選8：8:8:8，備選：8:8:8:0
例如：www.jeasyui.com/demo下的，dataGrid控件下的row editing in datagrid，點擊每行每列的表格可以進行修改：
界面簡潔、大方，不需要太多的二次開發，只需要簡單的修改，就可以滿足開發者的需求。
1:按鈕控件：Append, Remove, Accept, Reject ,GetChanges
后台代碼：
2:datagrid表格的列名：item ID，Product,List Price,Unit Cost,Attribute
3:表格數據
根據row editing in datagrid進行修改后的表格
二easy-ui具體設計
2.1數據庫User表設計：
| Id(string) | name(string) | sex(string) | Datetime(datatime) | itemID(string) |
| 1 | tom | woman | 2014/1/10 | u1401 |
| 2 | jerry | woman | 2014/3/1 | u1402 |
| 3 | frank | man | 2014/7/1 | u1405 |
| 4 | sam | man | 2015/2/1 | u1501 |
通過微軟的SQL Server2008建立數據庫后，建立表單User；
<body>
<form id="form1" method="post">
<h2>用戶表格編輯</h2>
<div style="margin:20px 0;"></div>
<table id="dg" class="easyui-datagrid" title="用戶信息表" style="width:350px;height:auto "
data-options="
iconCls: 'icon-edit',
singleSelect: true,
toolbar: '#tb',
url: 'GetUsersJson',
method: 'get',
onClickRow: onClickRow,
">
<thead>
<tr>
<th data-options="field:'itemID',width:80,editor:'text'">Name ID</th>
<th data-options="field:'nameID',width:100,
formatter:function(value,row){ return row.name; },
editor:{
type:'combobox',
options:{
valueField:'nameID',
textField:'name',
data:users
}
}">Name</th>
<th data-options="field:'sex',width:80,align:'right',
editor:{
type:'combobox',
options:{
valueField:'sex',
textField:'sex',
data:sexs
}
}">Sex</th>
<th data-options="field:'datetime',width:85,align:'right',editor:'datebox'">Datetime</th>
</tr>
</thead>
Js文件：
<script type="text/javascript">
var editIndex = undefined;
//用戶名數組
var users = [
{ nameID: '1', name: 'tom' },
{ nameID: '2', name: 'jerry' },
{ nameID: '3', name: 'frank' },
];
//性別數組
var sexs = [
{ sex: 'man', sexID: '1' },
{ sex: 'woman', sexID: '2' },
];
$(function () {
$("#dg").datagrid({ //取datagrid表格
onAfterEdit: function(index) { //定義編輯后的事件
//獲取編輯過該行屬性及列值
var cur = $("#dg").datagrid("selectRow", index).datagrid("getSelected");
////初始化json,填充數據
|
先取出行修改后的字段值，然后分別放到Json字符串的sex, Nameid,name,id,date里，用ajax方式把json數據提交到后台 |
var json = {};
json.nameid = cur.itemID;//取名字id
json.sex = cur.sex;//取性別
json.name = cur.name;//取名字
json.id = cur.id;//取id
json.date = cur.datetime;//取時
////ajax提交json
$.ajax({
url: "GetCellsJson",//提交方法
type: "post",//提交方式
data:json
})
}
})
</script>
</table>
2.2基於MVC的后台C#代碼
2.2.1前台讀取User表
對應前台的代碼是：
對應的數據訪問層是:
