【背景】
经过一段时间项目的开发,对于DataGrid控件的运用有了深刻理解,在做项目的过程中,对于概念、属性、基本运用、操作进行了总结,在这里小编与大家分享我的总结。
【DataGrid简介】
该数据识别的DataGrid控件看起来与Grid控件类似,实际上DataGrid是一个固定的列集合,每一列的行数都是不确定的。
大概有了一个概念的认识,那么让我们进入实战运用吧。
【DataGrid简单运用】
下面为一个DataGrid的一个简单运用,它可不仅仅是这些属性哦,您继续往下看:
<span style="font-family:KaiTi_GB2312;font-size:18px;">-
$('#DataGrid的ID').datagrid({
url: '地址',
width: "100%",
striped: true, //行背景交换
idField: '返回集合的主键',
loadMsg: '正在加载用户的信息...',
pagination: true,
fitColumns: true,
singleSelect: false,
//pageNumber: 1,
pageList: [10, 20, 30, 40, 50],
pageSize: 10,
pageNumber: 1,
queryParams: {
searchName: $("#searchName").val()
},
}).datagrid("reload");
-</span>
【DataGrid属性】
下面是DataGrid的属性大全,以后再遇到了就可以来这里看看了,不过对于如何操作DataGrid也应该了解一下下,那么继续往下看哦:
【对DataGrid的操作】
这是我在做项目的过程中遇到的一些简单操作:
1、获取选中行的数据:这里需要将idField属性设置为返回集合的主键
var selectRows = $("#DataGrid的ID").datagrid("getSelections");
2、获取改变行的数据:
var selectRows = $("#DataGrid的ID").datagrid("getChanges");
3、没有复选框的或行值操作:
var selectRows = $('#DataGrid的ID').datagrid('getSelected');
4、获取DataGrid表头数据:
var fields = $('#DataGrid的ID').datagrid('getColumnFields');
5、加载表格数据
var array = new Array(); //这个为存有数据的集合
$('#DataGrid的ID').datagrid('loadData', array);
6、刷新表格
$('#dgno').datagrid('reload');
【汉化DataGrid】
对EasyUI封装的DataGrid英文看起来不太舒服,那么这里提供了修改部分引用文件的代码。
将下面代码放到Text文件中,保存,引用到对应的HTML页面中就可以实现汉化!
<span style="font-family:KaiTi_GB2312;font-size:18px;">-
if ($.fn.pagination){
$.fn.pagination.defaults.beforePageText = '第';
$.fn.pagination.defaults.afterPageText = '共{pages}页';
$.fn.pagination.defaults.displayMsg = '显示{from}到{to},共{total}记录';
}
if ($.fn.datagrid){
$.fn.datagrid.defaults.loadMsg = '正在处理,请稍待。。。';
}
if ($.fn.treegrid && $.fn.datagrid){
$.fn.treegrid.defaults.loadMsg = $.fn.datagrid.defaults.loadMsg;
}
if ($.messager){
$.messager.defaults.ok = '确定';
$.messager.defaults.cancel = '取消';
}
if ($.fn.validatebox){
$.fn.validatebox.defaults.missingMessage = '该输入项为必输项';
$.fn.validatebox.defaults.rules.email.message = '请输入有效的电子邮件地址';
$.fn.validatebox.defaults.rules.url.message = '请输入有效的URL地址';
$.fn.validatebox.defaults.rules.length.message = '输入内容长度必须介于{0}和{1}之间';
$.fn.validatebox.defaults.rules.remote.message = '请修正该字段';
}
if ($.fn.numberbox){
$.fn.numberbox.defaults.missingMessage = '该输入项为必输项';
}
if ($.fn.combobox){
$.fn.combobox.defaults.missingMessage = '该输入项为必输项';
}
if ($.fn.combotree){
$.fn.combotree.defaults.missingMessage = '该输入项为必输项';
}
if ($.fn.combogrid){
$.fn.combogrid.defaults.missingMessage = '该输入项为必输项';
}
if ($.fn.calendar){
$.fn.calendar.defaults.weeks = ['日','一','二','三','四','五','六'];
$.fn.calendar.defaults.months = ['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月'];
}
if ($.fn.datebox){
$.fn.datebox.defaults.currentText = '今天';
$.fn.datebox.defaults.closeText = '关闭';
$.fn.datebox.defaults.okText = '确定';
$.fn.datebox.defaults.missingMessage = '该输入项为必输项';
$.fn.datebox.defaults.formatter = function(date){
var y = date.getFullYear();
var m = date.getMonth()+1;
var d = date.getDate();
return y+'-'+(m<10?('0'+m):m)+'-'+(d<10?('0'+d):d);
};
$.fn.datebox.defaults.parser = function(s){
if (!s) return new Date();
var ss = s.split('-');
var y = parseInt(ss[0],10);
var m = parseInt(ss[1],10);
var d = parseInt(ss[2],10);
if (!isNaN(y) && !isNaN(m) && !isNaN(d)){
return new Date(y,m-1,d);
} else {
return new Date();
}
};
}
if ($.fn.datetimebox && $.fn.datebox){
$.extend($.fn.datetimebox.defaults,{
currentText: $.fn.datebox.defaults.currentText,
closeText: $.fn.datebox.defaults.closeText,
okText: $.fn.datebox.defaults.okText,
missingMessage: $.fn.datebox.defaults.missingMessage
});
}
-</span>
【感受】
通过项目的学习,对于控件的认识不断加深,并且会在各种方面各种角度来认识了解,其实这样的方式针对于我们学习任何一个东西,总结之后,相信以后的路上会从DataGrid的其它角度产生更加深刻的理解,很期待与你的再次相遇,加油O(∩_∩)O~