对easyui datagrid进行一个小小的封装，方便对datagrid进行增删改查（crud)操作。还只是进行了初步封装，后期将进行更彻底的封装。
/*******************************************************************************
**@filename : \Public\Admin\Js\layout.js
**@date : 2015/12/2 16:14:11
**@Author : lampNick
**@blog : www.mitnick.fun
**@description : datagrid opt.
**This is not a free software!
*******************************************************************************/
function timeNow(){
var now = new Date();
var myTime = now.toLocaleString();
/*
var myYear = now.getFullYear();
var myMonth = now.getMonth();
var myDate = now.getDate();
var myHour = now.getHours();
var myMin = now.getMinutes();
var mySec = now.getSeconds();
var myTime = myYear+"-"+myMonth+"-"+myDate+" "+myHour+":"+myMin+":"+mySec;*/
$("#timeNow").text(myTime);
}
function formateDate(value){
if(value != null){
var now = new Date(parseInt(value)*1000);
var myYear = now.getFullYear();
var myMonth = now.getMonth();
var myDate = now.getDate();
var myHour = now.getHours();
var myMin = now.getMinutes();
var mySec = now.getSeconds();
var myTime = myYear+"-"+myMonth+"-"+myDate+" "+myHour+":"+myMin+":"+mySec;
return myTime;
}
}
$(function () {
timeNow();
setInterval(timeNow,1000);
});
$.extend($.fn.validatebox.defaults.rules, {
/*必须和某个字段相等*/
equalTo: { validator: function (value, param) {
return $(param[0]).val() == value;
}, message: '字段不匹配'
}
});
function baseGrid(idName, dg_toolbar, url, cols, data_opt){
var default_opt = {
singleSelect:true,
// fit:true,
fitColumns:true,
idField:'id',
loadMsg:'拼命加载中...',
rownumbers : true,
pagination:true,
pageSize : 15,
pageList : [15, 30, 45, 60,100],
pageNumber : 1,
striped : true
};
for(opt in data_opt){
default_opt[opt]=data_opt[opt];
}
$('#'+idName).datagrid({
url: url,
loadMsg: '数据加载中,请稍候...',
nowrap:false,
rownumbers : default_opt["rownumbers"],
pageSize: default_opt["pageSize"],
pageList: default_opt["pageList"],
pagination:default_opt["pagination"],
singleSelect:default_opt["singleSelect"],
fitColumns:default_opt["fitColumns"],
checkOnSelect:default_opt["checkOnSelect"],
selectOnCheck:default_opt["selectOnCheck"],
toolbar: dg_toolbar==""?"":"#"+dg_toolbar,
columns:cols
});
}
function addData(idName, formIdName, dgIdName, href, dohref, data_opt) {
var add_opt = {
title: '添加',
width: 850,
height: 580,
closed: false,
cache: false,
modal: true
};
for(opt in data_opt){
add_opt[opt]=data_opt[opt];
}
$("#"+idName).show();
$("#"+idName).dialog({
title: add_opt["title"],
width: add_opt["width"],
height: add_opt["height"],
closed: add_opt["closed"],
cache: add_opt["cache"],
modal: add_opt["modal"],
href: href,
buttons:[{
text:'保存',
iconCls:'icon-save',
plain:true,
handler:function(){
$('#'+formIdName).form('submit',{
url:dohref,
onSubmit: function(){
$.messager.progress({
text:'正在新增中...'
});
return $('#'+formIdName).form('validate');
},
success:function(data){
$.messager.progress('close');
if(data==1){
$.messager.show({
title:'温馨提示',
msg:'添加成功！'
});
$("#"+idName).dialog('close');
$('#'+formIdName).form('reset');
$("#"+dgIdName).datagrid("reload");
}else{
$.messager.alert('错误提示',data,'warning');
}
}
});
}
},{
text:'取消',
iconCls:'icon-clear',
plain:true,
handler:function(){
$("#"+idName).dialog("close",true);
}
}]
});
$('.username').focus();
//console.log($('#'+idName).dialog("options"));
}
function editData(idName, formIdName, dgIdName, href, dohref, data_opt) {
var add_opt = {
title: '修改',
width: 850,
height: 580,
closed: false,
cache: false,
modal: true
};
for(opt in data_opt){
add_opt[opt]=data_opt[opt];
}
var rows = $('#'+dgIdName).datagrid('getSelections');
if (rows.length > 1) {
$.messager.alert('温馨提示', '编辑记录一次只能选定一条数据！', 'warning');
} else if (rows.length == 1) {
$("#"+idName).show();
$("#"+idName).dialog({
title: add_opt["title"],
width: add_opt["width"],
height: add_opt["height"],
closed: add_opt["closed"],
cache: add_opt["cache"],
modal: add_opt["modal"],
iconCls : 'icon-user-add',
href:href+"&id="+rows[0].id,
buttons : [{
text : '提交',
iconCls : 'icon-save',
plain:true,
handler : function () {
$('#'+formIdName).form('submit',{
url:dohref,
onSubmit: function(param){
param.id = rows[0].id;
$.messager.progress({
text:'正在修改中...'
});
return $('#'+formIdName).form('validate');
},
success:function(data){
$.messager.progress('close');
if(data==1){
$.messager.show({
title:'温馨提示',
msg:'修改成功！'
});
$("#"+idName).dialog('close');
$('#'+formIdName).form('reset');
$("#"+dgIdName).datagrid("reload");
}else{
$.messager.alert('错误提示',data,'warning');
}
}
});
},
},{
text : '取消',
iconCls : 'icon-clear',
plain:true,
handler : function () {
$("#"+idName).dialog('close');
},
}],
});
} else if (rows.length == 0) {
$.messager.alert('温馨提示', '编辑记录时至少选定一条数据！', 'warning');
}
}
function removeData(dgIdName, href, priId) {
var rows = $("#"+dgIdName).datagrid("getSelections");
if(typeof(priId)=='undefined')
priId='id';
var id = rows[0][priId];
if(rows.length>0){
$.messager.confirm('确定操作','您确定要删除所选记录吗？',function(flag){
if(flag){
// var ids = [];
// for (var i = 0; i < rows.length; i ++) {
// ids.push(rows[i].id);
// }
//console.log(id);return false;
$.ajax({
type : 'POST',
url : href,
data : {
//ids : ids.join(','),
id:id
},
beforeSend : function () {
$('#'+dgIdName).datagrid('loading');
},
success : function (data) {
//console.log(data+rows[0].id);
if (data>=0) {
$('#'+dgIdName).datagrid('loaded');
$('#'+dgIdName).datagrid('load');
$('#'+dgIdName).datagrid('unselectAll');
$.messager.show({
title : '温馨提示',
msg : data + '条数据被删除成功！',
});
}else{
$.messager.alert("提示",data,'info');
}
},
});
}
});
}else{
$.messager.alert("提示","请选择需要删除的记录！",'info');
}
}
转载请注明：MitNick » 对easyui datagrid进行一个小小的封装，方便对datagrid进行增删改查（crud)操作。