【背景】
经过一段时间项目的开发，对于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~
