easyui-datagrid開(kāi)發(fā)實(shí)踐(總結(jié))
更新時(shí)間：2017年08月02日 11:09:39 作者：Sam Xiao
本篇文章主要介紹了easyui-datagrid開(kāi)發(fā)實(shí)踐(總結(jié))，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
一，引言
工作的需要，做了3年的wpf(mvvm)……，又因?yàn)轫?xiàng)目的需求，回歸到web的開(kāi)發(fā)。
- 3 years ago，vue是我三年前沒(méi)用過(guò)的玩意兒。
- 3 years ago，bootstrap組件沒(méi)現(xiàn)在成熟。
- 3 years ago，font awesome的普及度沒(méi)有現(xiàn)在高。
- 3 years ago，ui組件的選擇也沒(méi)有現(xiàn)在多。
二，項(xiàng)目的前端（easyui模板訂制）
整個(gè)項(xiàng)目采用了oracle + dapper + castle + mvc + easyui的技術(shù)結(jié)合，本篇博客重點(diǎn)介紹easyui。
easyui的默認(rèn)風(fēng)格看久了很容易產(chǎn)生視覺(jué)疲勞，在這個(gè)項(xiàng)目中，我個(gè)性化訂制風(fēng)格。
訂制easyui模板的工作量是挺大的，我用了一個(gè)偷懶的方法，花了幾百塊錢(qián)在網(wǎng)上買(mǎi)了幾個(gè)easyui的皮膚，然后對(duì)這些皮膚，進(jìn)行優(yōu)化和重構(gòu)。
money比較緊的同學(xué)，可以去下載easyui的免費(fèi)皮膚。
三，easyui-datagrid的基本使用：
1，加載數(shù)據(jù)
a，通過(guò)post，url的方法向后端請(qǐng)求數(shù)據(jù)，如圖所示：
$('#List').datagrid({
title: "交易公司",
loadMsg: '@CommonResource.Processing',
toolbar: '#tb',
width: "100%",
height: "100%",
//idField:"ID",
//data: getData(),
url: "@Url.Action("GetList")",
methord: 'post',
rownumbers: true,
autoRowHeight: false,
fit: true,
//fitColumns: true,
striped: true, //奇偶行
singleSelect: true,//單選模式
checkOnSelect: false,
selectOnCheck: false,
collapsible: true,
pagination: true,
pageNumber: 1,
pageSize: 10,
pageList: [10, 20],
queryParams: { },
columns: [[
{ field: 'Company_Name', title: '公司名稱(chēng)', width: 100, sortable: false },
{ field: 'Abbreviation', title: '簡(jiǎn)稱(chēng)', width: 100, sortable: false },
{ field: 'Business_Address', title: '經(jīng)營(yíng)地址', width: 100, sortable: false },
{ field: 'Registered_Address', title: '注冊(cè)地址', width: 100, sortable: false },
{ field: 'Tel', title: '電話', width: 100, sortable: false },
{ field: 'Fax', title: '傳真', width: 100, sortable: false },
{ field: 'Contactor', title: '聯(lián)系人', width: 100, sortable: false },
{ field: 'Payment', title: '結(jié)算方式', width: 100, sortable: false },
{ field: 'Beneficiary_Name', title: '開(kāi)戶(hù)名稱(chēng)', width: 100, sortable: false },
{ field: 'Beneficiary_Address', title: '開(kāi)戶(hù)地址', width: 100, sortable: false },
{ field: 'Advising_Bank', title: '通知行', width: 100, sortable: false },
{ field: 'Bank_Address', title: '銀行地址', width: 100, sortable: false },
{ field: 'Swift_Code', title: '銀行代碼', width: 100, sortable: false },
{ field: 'Beneficiary_Account', title: '銀行賬戶(hù)', width: 100, sortable: false },
{ field: 'Company_Chop', title: '電子章', width: 100, sortable: false },
{ field: 'Send_Url', title: '發(fā)件郵箱鏈接', width: 100, sortable: false },
{ field: 'Send_Email', title: '發(fā)件人郵箱', width: 100, sortable: false },
{ field: 'Remark', title: '備注', width: 100, sortable: false },
{ field: 'Created_By', title: '創(chuàng)建人', width: 100, sortable: false },
{ field: 'Creation_Date', title: '創(chuàng)建日期', width: 100, sortable: false },
{ field: 'Modify_By', title: '修改人', width: 100, sortable: false },
{ field: 'Modify_Date', title: '修改日期', width: 100, sortable: false },
]],
});
});
b，先定義好了datagrid的屬性以及列，再通過(guò)loadData的方法設(shè)置datagrid的數(shù)據(jù)
$('#Detail').datagrid({
loadMsg: '@CommonResource.Processing',
toolbar: '#tb',
width: "100%",
height: "100%",
//data: [],
rownumbers: true,
autoRowHeight: false,
fit: true,
fitColumns: true,
striped: true,
singleSelect: true,
collapsible: false,
pagination: false,
queryParams: { },
columns: [[
{ field: 'Country_Name', title: '國(guó)家名稱(chēng)', width: 100, sortable: false },
{ field: 'Item_Number', title: '物料編碼', width: 100, sortable: false },
]],
});
var returnData = JSON.parse(response.data);
$('#Detail').datagrid("loadData", returnData);
2，合并單元格
有時(shí)候用戶(hù)需要如下圖的效果
可以在datagrid的onLoadSuccess事件里增加如下代碼：
onLoadSuccess: function (data) {
//var opts = $('#List').datagrid('getColumnFields');
var opts = new Array("Item_Number", "Country_Name", "Item_Desc", "Item_Desc_En", "Item_Type", "Unit", "Hs_Code", "Destination_Code", "Status", "Remark", "Create_User", "Create_Date");
var rowsCount = data.rows.length;
var mark = 1;
for (var j = 1; j < rowsCount; j++)
{
var preCellVal = data.rows[j - 1]["Material_Id"];
var currentCellVal = data.rows[j]["Material_Id"];
if (preCellVal == currentCellVal) {
mark += 1;
for (var c = 0; c < opts.length; c++) {
var columnName = opts[c];
$(this).datagrid('mergeCells', {
field: columnName,
index: j + 1 - mark,
rowspan: mark
});
}
}
else {
mark = 1;
}
}
},
3，行，列變色
針對(duì)這樣的行，列變色效果：
a，行變色
$('#Detail').datagrid({
loadMsg: '@CommonResource.Processing',
toolbar: '#tb',
width: "100%",
height: "100%",
url: "@Url.Action("GetLines")",
methord: 'post',
rownumbers: true,
autoRowHeight: false,
fit: true,
fitColumns: true,
striped: true,
singleSelect: true,
collapsible: false,
pagination: false,
queryParams: { hid: $("#Hid").val() },
columns: [[
{ field: 'Material_No', title: '物料號(hào)', width: 100, sortable: false },
{ field: 'Description', title: '中文描述', width: 100, sortable: false },
{ field: 'En_Description', title: '英文描述', width: 100, sortable: false },
{ field: 'Unit', title: '單位', width: 100, sortable: false },
{ field: 'Quantity', title: '工單數(shù)量', width: 100, sortable: false },
{ field: 'Total_Actual_Send_Quantity', title: '已出貨數(shù)量', width: 100, sortable: false },
{ field: 'Remark', title: '備注', width: 100, sortable: false },
]],
rowStyler: function (index, row) {
if (row.Quantity == 0) {
return 'background-color:pink;color:blue;font-weight:bold;';
}
},
});
b，列變色
$('#Detail').datagrid({
loadMsg: '@CommonResource.Processing',
width: "100%",
height: "100%",
data: [],
rownumbers: true,
autoRowHeight: false,
fit: true,
fitColumns: true,
striped: true,
singleSelect: true,
checkOnSelect: false,
selectOnCheck: false,
collapsible: false,
pagination: false,
queryParams: {},
columns: [[
{ field: 'sel', checkbox: true },
{ field: 'Material_No', title: '物料號(hào)', width: 80, sortable: false },
{ field: 'Description', title: '中文描述', width: 80, sortable: false },
{ field: 'Unit', title: '單位', width: 80, sortable: false },
{ field: 'Quantity', title: '工單數(shù)量', width: 80, sortable: false },
{ field: 'Total_Actual_Send_Quantity', title: '已出貨數(shù)量', width: 80, sortable: false },
{ field: 'Remain_Quantity', title: '剩余數(shù)量', width: 80, sortable: false },
{
field: 'Actual_Send_Quantity', title: '本次出貨', width: 80, sortable: false,
editor: { type: 'numberbox', options: { required: true, min: 0 }, },
styler: function (value, row, index) {
return 'background-color:#ecffff;';
},
},
{
field: 'Remark', title: '備注', width: 80, sortable: false,
editor: { type: 'textbox', options: { validType: 'length[1,20]' }, },
styler: function (value, row, index) {
return 'background-color:#ecffff;';
},
},
]],
4，為datagrid添加工具條
如下效果的工具條，是通過(guò)datagrid的 toolbar 屬性來(lái)指定，要留意的是toolbar的控件名稱(chēng)需要加上#符號(hào)。
html代碼：
<div id="tb">
<a id='condition' href='#' class='btn btn-default more'><i class='fa fa-ellipsis-v'></i> 查詢(xún)條件</a>
@Html.ToolButton(string.Format(@"<a id='btnCreate' href='#' class='btn btn-default'><i class='fa fa-plus'></i> {0}</a>", @CommonResource.Add), ActionCode.Create)
@Html.ToolButton(string.Format(@"<a id='btnEdit' href='#' class='btn btn-default'><i class='fa fa-pencil'></i> {0}</a>", @CommonResource.Edit), ActionCode.Edit)
@Html.ToolButton(string.Format(@"<a id='btnDelete' data-content='Delete 1' href='#' class='btn btn-primary'><i class='fa fa-trash'></i> {0}</a>", @CommonResource.Delete), ActionCode.Delete)
</div>
js代碼：
5，做增，刪，改操作
a,為datagrid增加一行
function addCallBack(data) {
$('#List').datagrid('insertRow', {
index: 0,
row: data,
});
layer.msg('@CommonResource.AddSuccess', { icon: 1, time: 1000 });
}
b,為datagrid編輯一行
function editCallBack(data) {
var selectData = $('#List').datagrid('getSelected');
var selectIndex = $('#List').datagrid('getRowIndex', selectData);
$('#List').datagrid('updateRow', {
index: selectIndex,
row: data,
});
layer.msg('@CommonResource.ModifySuccess', { icon: 1, time: 1000 });
}
c,為datagrid刪除一行
$("#btnLineDelete").click(function () {
var row = $('#Detail').treegrid('getSelected');
if (row != null) {
var rowIndex = $('#Detail').datagrid('getRowIndex', row);
$('#Detail').datagrid('deleteRow', rowIndex);
layer.msg('@CommonResource.DeleteSuccess', { icon: 1, time: 1000 });
}
else {
layer.msg('@CommonResource.Noselectedrecord', { icon: 2, time: 1000 });
}
});
d,treegrid的操作方法略有區(qū)別，附上源碼：
function addCallBack(data) {
var row = $('#List').treegrid('getSelected');
$('#List').treegrid('append', {
parent: data.Parent_Id,
data: [{
Id: data.Id,
Name: data.Name,
En_Name:data.En_Name,
Code: data.Code,
Enable: data.Enable,
Sort: data.Sort,
}]
});
layer.msg('@CommonResource.AddSuccess', { icon: 1, time: 1000 });
}
function editCallBack(data) {
var row = $('#List').treegrid('getSelected');
$('#List').treegrid('update', {
id: row.Id,
row: {
Name: data.Name,
En_Name: data.En_Name,
Code: data.Code,
Enable: data.Enable,
Sort: data.Sort,
}
});
layer.msg('@CommonResource.ModifySuccess', { icon: 1, time: 1000 });
}
$("#btnDelete").click(function () {
var row = $('#List').treegrid('getSelected');
if (row != null) {
layer.confirm('@CommonResource.ConfirmDelete', {
btn: ['@CommonResource.Sure', '@CommonResource.Cancel'],
shadeClose: true,
}, function () {
if (row.ChildCount == 0 || typeof (row.ChildCount) == 'undefined') {
$.post("@Url.Action("Delete")/" + row.Id, function (data) {
if (data == "1") {
$("#List").treegrid('remove', row.Id);
layer.msg('@CommonResource.DeleteSuccess', { icon: 1, time: 1000 });
}
else {
layer.msg('@CommonResource.DeleteFailed', { icon: 2, time: 1000 });
}
}, "json");
}
else {
layer.msg('@CommonResource.Noselectedrecord', { icon: 2, time: 1000 });
}
}, function () {
});
}
else {
layer.msg('@CommonResource.Noselectedrecord', { icon: 2, time: 1000 });
}
});
6，編輯單元格
具體代碼實(shí)現(xiàn)
var taxTypeList = JSON.parse($("#taxTypeList").val());
var manufactureList = JSON.parse($("#manufactureList").val());
$.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 = -1;
function endEditCal() {
if (editIndex == -1) {
return true;
}
if ($('#Detail').datagrid('validateRow', editIndex)) {
$('#Detail').datagrid('endEdit', editIndex);
editIndex = -1;
return true;
}
else {
return false;
}
}
$('#Detail').datagrid({
loadMsg: '@CommonResource.Processing',
toolbar: '#tb',
width: "100%",
height: "100%",
data: JSON.parse($("#MaterialDetailListStr").val()),
rownumbers: true,
autoRowHeight: false,
fit: true,
fitColumns: true,
striped: true,
singleSelect: true,
collapsible: false,
pagination: false,
queryParams: { },
columns: [[
{
field: 'Material_Use', title: '用途', width: 100, sortable: false,
formatter: function (value) {
for (var i = 0; i < manufactureList.length; i++) {
if (manufactureList[i].Key == value) return manufactureList[i].Value;
}
return value;
},
editor: {
type: 'combobox',
options: {
valueField: 'Key',
textField: 'Value',
data: manufactureList,
required: true,
panelHeight: "auto",
editable:false,
}
},
},
{
field: 'Tax_Type', title: '稅別', width: 100, sortable: false,
formatter: function (value) {
for (var i = 0; i < taxTypeList.length; i++) {
if (taxTypeList[i].Key == value) return taxTypeList[i].Value;
}
return value;
},
editor: {
type: 'combobox',
options: {
valueField: 'Key',
textField: 'Value',
data: taxTypeList,
required: true,
panelHeight: "auto",
editable: false,
}
},
},
{ field: 'Tax_Bcd', title: 'BCD', width: 100, sortable: false, editor: { type: 'numberbox', options: { required: true, suffix: '%', precision: 2, min: 0, max: 100, } } },
{ field: 'Tax_Cess', title: 'CESS', width: 100, sortable: false, editor: { type: 'numberbox', options: { required: true, suffix: '%', precision: 2, min: 0, max: 100, } } },
{ field: 'Tax_Igst', title: 'IGST', width: 100, sortable: false, editor: { type: 'numberbox', options: { required: true, suffix: '%', precision: 2, min: 0, max: 100, } } },
]],
@if (Request.Params["Operate"] != "View")
{
<text>
onClickCell: function (index, field, value) {
if (endEditCal()) {
$(this).datagrid('selectRow', index).datagrid('editCell', { index: index, field: field }); //編輯一個(gè)單元格
//$(this).datagrid('beginEdit', index); //編輯一行
editIndex = index;
}
else {
layer.msg('當(dāng)前行的數(shù)據(jù)編輯有誤', { icon: 2, time: 1000 });
}
},
onAfterEdit: function (index, row, changes) {
var rowData = $(this).datagrid('getData').rows[index];
$('#Detail').datagrid('updateRow', {
index: index,
row: {},
});
},
onLoadSuccess: function (data) {
for (var index = 0; index < data.rows.length; index++) {
$(this).datagrid('beginEdit', index);
}
},
</text>
}
});
$("#btnLineCreate").click(function () {
if (endEditCal()) {
editIndex = 0;
$('#Detail').datagrid('insertRow', {
index: editIndex,
row: {},
});
$('#Detail').datagrid('selectRow', editIndex);
$('#Detail').datagrid('beginEdit', editIndex);
}
else {
layer.msg('當(dāng)前行的數(shù)據(jù)編輯有誤', { icon: 2, time: 1000 });
}
});
$("#btnLineDelete").click(function () {
var row = $('#Detail').treegrid('getSelected');
if (row != null) {
var rowIndex = $('#Detail').datagrid('getRowIndex', row);
$('#Detail').datagrid('deleteRow', rowIndex);
layer.msg('@CommonResource.DeleteSuccess', { icon: 1, time: 1000 });
}
else {
layer.msg('@CommonResource.Noselectedrecord', { icon: 2, time: 1000 });
}
});
$("#btnSave").click(function () {
var summaryValidate = true;
var rows = $("#Detail").datagrid("getRows");
$(rows).each(function (index, itemData) {
if ($('#Detail').datagrid('validateRow', index)) {
$('#Detail').datagrid('endEdit', index);
}
else {
summaryValidate = false;
return false;
}
});
if (summaryValidate) {
if (rows.length == 2) {
$("#MaterialDetailListStr").val(JSON.stringify(rows));
}
else {
layer.msg('稅別,用途應(yīng)該設(shè)置為2行數(shù)據(jù)', { icon: 2, time: 1000 });
return false;
}
}
else {
layer.msg('當(dāng)前表單數(shù)據(jù)編輯有誤', { icon: 2, time: 1000 });
return false;
}
var check = $('form').form('validate');
if (check) {
$.ajax({
url: "@Url.Action("CreateMaterial")",
type: "Post",
data: $("form").serialize(),
dataType: "json",
success: function (data) {
if (data.Key == "1") {
parent.$("#List").datagrid('reload');
var index = parent.layer.getFrameIndex(window.name);
parent.layer.close(index);
parent.layer.msg('@CommonResource.AddSuccess', { icon: 1, time: 1000 });
}
else {
layer.msg("物料編號(hào)'" + data.Value.Item_Number + "'在數(shù)據(jù)庫(kù)中已添加", { icon: 2, time: 1000 });
}
},
error: function (jqXHR, textStatus, errorThrown) {
layer.msg('@CommonResource.AddFailed', { icon: 2, time: 1000 });
}
});
}
});
7，重置datagrid布局 $('#List').datagrid("resize");
$(function () {
$(".more").click(function () {
$(this).closest(".conditions").siblings().toggleClass("hide");
$('#List').datagrid("resize");
});
})
四，總結(jié)
這些技巧，在幫助文檔里也說(shuō)的很詳細(xì)，我只是把這些技術(shù)用于實(shí)踐。希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- jQuery EasyUI API 中文文檔 - DataGrid數(shù)據(jù)表格
- Jquery下EasyUI組件中的DataGrid結(jié)果集清空方法
- jQuery easyui datagrid動(dòng)態(tài)查詢(xún)數(shù)據(jù)實(shí)例講解
- jQuery EasyUI datagrid實(shí)現(xiàn)本地分頁(yè)的方法
- jQuery EasyUI之DataGrid使用實(shí)例詳解
- JQueryEasyUI datagrid框架的基本使用
- jQuery Easyui學(xué)習(xí)之datagrid 動(dòng)態(tài)添加、移除editor
- EasyUI中datagrid在ie下reload失敗解決方案
- EasyUi datagrid 實(shí)現(xiàn)表格分頁(yè)
- jQuery easyUI datagrid 增加求和統(tǒng)計(jì)行的實(shí)現(xiàn)代碼
相關(guān)文章
jQuery插件echarts實(shí)現(xiàn)的多折線圖效果示例【附demo源碼下載】
這篇文章主要介紹了jQuery插件echarts實(shí)現(xiàn)的多折線圖效果,結(jié)合完整實(shí)例形式分析了echarts插件繪制多折線圖效果的具體步驟與相關(guān)操作技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2017-03-03
jQuery插件實(shí)現(xiàn)表格隔行變色及鼠標(biāo)滑過(guò)高亮顯示效果代碼
這篇文章主要介紹了jQuery插件實(shí)現(xiàn)表格隔行變色及鼠標(biāo)滑過(guò)高亮顯示效果代碼,涉及jQuery針對(duì)頁(yè)面元素動(dòng)態(tài)操作及響應(yīng)鼠標(biāo)事件動(dòng)態(tài)修改頁(yè)面元素樣式的相關(guān)技巧,需要的朋友可以參考下2016-02-02
jQuery數(shù)據(jù)類(lèi)型小結(jié)(14個(gè))
jQuery除了包含原生JS中的內(nèi)置數(shù)據(jù)類(lèi)型(built-in datatype)，還包括一些擴(kuò)展的數(shù)據(jù)類(lèi)型(virtual types)，如Selectors、Events等，通過(guò)本文給大家分享14個(gè)jquery數(shù)據(jù)類(lèi)型，感興趣的朋友一起學(xué)習(xí)吧2016-01-01
jQuery圖片特效插件Revealing實(shí)現(xiàn)拉伸放大
本文給大家分享的是jQuery圖片展示效果，使用的是jQuery Revealing插件，不點(diǎn)擊的情況下，圖片整齊排列成一行，當(dāng)任意一個(gè)圖片縮略圖被點(diǎn)擊的時(shí)候，該圖片就放大顯示，當(dāng)點(diǎn)擊關(guān)閉按鈕時(shí)圖片又重新還原了縮略圖模式。2015-04-04
非常強(qiáng)大的 jQuery.AsyncBox 彈出對(duì)話框插件
今天無(wú)意中發(fā)現(xiàn)了這個(gè)插件，和大家分享一下，功能和樣式都很強(qiáng)大，調(diào)用也很方便，而且支持鎖定屏幕的效果，插件的效果圖如下，更多效果和皮膚請(qǐng)到官網(wǎng)下載！2011-08-08
基于jQuery實(shí)現(xiàn)的文字按鈕表單特效整理
這里給大家整理了10個(gè)熱門(mén)的基于jQuery實(shí)現(xiàn)的文字、按鈕、表單等特效的代碼，集合起來(lái)方便大家對(duì)比使用2014-12-12
這篇文章主要為大家詳細(xì)介紹了jquery簡(jiǎn)易手風(fēng)琴插件的封裝，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-10-10
jQuery對(duì)底部導(dǎo)航進(jìn)行跳轉(zhuǎn)并高亮顯示的實(shí)例代碼
這篇文章主要介紹了jQuery對(duì)底部導(dǎo)航進(jìn)行跳轉(zhuǎn)并高亮顯示的實(shí)例代碼，代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下2019-04-04
本文為大家介紹下Jquery如何獲取對(duì)象有哪幾種方式，感興趣的朋友可以參考下2014-01-01
這篇文章主要介紹了jQuery中的siblings用法,結(jié)合實(shí)例形式簡(jiǎn)單分析了jQuery中siblings的功能及用法,需要的朋友可以參考下2015-12-12