分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置：首页 > 前端开发

jQuery EasyUI Datagrid组件默认视图分析

发布时间：2023-09-06 02:24责任编辑：苏小强关键词：jQuery组件

　　在Datagrid基础DOM结构的一文中，我对Datagrid组件的骨架做了很详细的描述。有了骨架还并不完整，还得有血有肉有衣服穿才行。强大的Datagrid组件允许我们自己定义如何在基础骨架上长出健壮诱人的身体，我们只要定义Datagrid的视图就可以实现。

在大多数情况下，我们并无特别要求，Datagrid给我们提供了默认的视图，默认视图被使用在90%以上的场景，所以对默认视图的分析显得非常有必要。注意视图里面定义了哪些接口，哪些方法，如果要自己写视图的话，最好把这些接口和方法都写齐全。话不多说，直接上代码(部分注释比较淫荡，未成年人轻绕行)

  1. varview={
  2. /**
  3. *填充表格主体数据(生成数据部分的各行tr)
  4. *@param{DOMobject}targetdatagrid宿主table对应的DOM对象
  5. *@param{DOMobject}container数据主体容器。包含两个可能的值，即：
  6. *1.frozen部分body1，对应的DOM对象为：div.datagrid-view>div.datagrid-view1>div.datagrid-body>div.datagrid-body-inner
  7. *2.常规部分body2，对应的DOM对象为：div.datagrid-view>div.datagrid-view2>div.datagrid-body
  8. *@param{boolean}frozen是否是冻结列
  9. *@return{undefined}未返回值
  10. */
  11. render:function(target,container,frozen){
  12. vardata=$.data(target,"datagrid");
  13. varopts=data.options;
  14. varrows=data.data.rows;
  15. varfields=$(target).datagrid("getColumnFields",frozen);
  16. if(frozen){
  17. //如果grid不显示rownumbers并且也没有frozenColumns的话，直接退出。
  18. if(!(opts.rownumbers||(opts.frozenColumns&&opts.frozenColumns.length))){
  19. return;
  20. }
  21. }
  22. //定义表格字符串，注意这里使用了数组的join方式代替了传统的"+"运算符，在大多浏览器中，这样效率会更高些。
  23. varhtml=["<tableclass=\"datagrid-btable\"cellspacing=\"0\"cellpadding=\"0\"border=\"0\"><tbody>"];
  24. for(vari=0;i<rows.length;i++){
  25. //striped属性，用于设置grid数据是否隔行变色，当然了实现原理很简单。
  26. varcls=(i%2&&opts.striped)?"class=\"datagrid-rowdatagrid-row-alt\"":"class=\"datagrid-row\"";
  27. /**
  28. *表格的rowStyler属性用于处理数据行的css样式，当然了这个样式仅仅是作用于tr标签上。
  29. *这地方使用call了方法来设置上下文，如果rowStyler函数内部使用了this的话，则this指向datagrid的宿主table对应的DOM对象。
  30. */
  31. varstyle=opts.rowStyler?opts.rowStyler.call(target,i,rows[i]):"";
  32. varstyler=style?"style=\""+style+"\"":"";
  33. /**
  34. *rowId：行的唯一标示，对应于tr的id属性，其由以下几部分组成：
  35. *1.字符窜常量："datagrid-row-r";
  36. *2.全局索引index：该索引值从1开始递增，同一个datagrid组件实例拥有唯一值，如果同一页面内有多个datagrid实例，那么其值从1递增分配给每个datagrid实例；
  37. *3.冻结列标识frozen：该标识用于标示是否是冻结列(包含行号和用户指定的frozenColumns)，"1"代表冻结列，"2"代表非冻结列；
  38. *4.行数索引：该值才是真正代表“第几行”的意思，该值从0开始递增
  39. *如页面内第一个datagrid实例的非冻结列第10行数据的rowId为"datagrid-row-r1-2-9"
  40. */
  41. varrowId=data.rowIdPrefix+"-"+(frozen?1:2)+"-"+i;
  42. html.push("<trid=\""+rowId+"\"datagrid-row-index=\""+i+"\""+cls+""+styler+">");
  43. /**
  44. *调用renderRow方法，生成行数据(行内的各列数据)。
  45. *这里的this就是opts.view，之所以用call方法，只是为了传参进去。这里我们使用this.renderRow(target,fields,frozen,i,rows[i])来调用renderRow方法应该也是可以的。
  46. */
  47. html.push(this.renderRow.call(this,target,fields,frozen,i,rows[i]));
  48. html.push("</tr>");
  49. }
  50. html.push("</tbody></table>");
  51. //用join方法完成字符创拼接后直接innerHTML到容器内。
  52. $(container).html(html.join(""));
  53. },
  54. /**
  55. *[renderFooterdescription]
  56. *@param{DOMobject}targetdatagrid宿主table对应的DOM对象
  57. *@param{DOMobject}container可能为dc.footer1或者dc.footer2
  58. *@param{boolean}frozen是否为frozen区
  59. *@return{undefined}未返回值
  60. */
  61. renderFooter:function(target,container,frozen){
  62. varopts=$.data(target,"datagrid").options;
  63. //获取footer数据
  64. varrows=$.data(target,"datagrid").footer||[];
  65. varcolumnsFields=$(target).datagrid("getColumnFields",frozen);
  66. //生成footer区的table
  67. varfooterTable=["<tableclass=\"datagrid-ftable\"cellspacing=\"0\"cellpadding=\"0\"border=\"0\"><tbody>"];
  68. for(vari=0;i<rows.length;i++){
  69. footerTable.push("<trclass=\"datagrid-row\"datagrid-row-index=\""+i+"\">");
  70. footerTable.push(this.renderRow.call(this,target,columnsFields,frozen,i,rows[i]));
  71. footerTable.push("</tr>");
  72. }
  73. footerTable.push("</tbody></table>");
  74. $(container).html(footerTable.join(""));
  75. },
  76. /**
  77. *生成某一行数据
  78. *@param{DOMobject}targetdatagrid宿主table对应的DOM对象
  79. *@param{array}fieldsdatagrid的字段列表
  80. *@param{boolean}frozen是否为冻结列
  81. *@param{number}rowIndex行索引(从0开始)
  82. *@param{jsonobject}rowData某一行的数据
  83. *@return{string}单元格的拼接字符串
  84. */
  85. renderRow:function(target,fields,frozen,rowIndex,rowData){
  86. varopts=$.data(target,"datagrid").options;
  87. //用于拼接字符串的数组
  88. varcc=[];
  89. if(frozen&&opts.rownumbers){
  90. //rowIndex从0开始，而行号显示的时候是从1开始，所以这里要加1.
  91. varrowNumber=rowIndex+1;
  92. //如果分页的话，根据页码和每页记录数重新设置行号
  93. if(opts.pagination){
  94. rowNumber+=(opts.pageNumber-1)*opts.pageSize;
  95. }
  96. /**
  97. *先拼接行号列
  98. *注意DOM特征，用zenCoding可表达为"td.datagrid-td-rownumber>div.datagrid-cell-rownumber"
  99. */
  100. cc.push("<tdclass=\"datagrid-td-rownumber\"><divclass=\"datagrid-cell-rownumber\">"+rowNumber+"</div></td>");
  101. }
  102. for(vari=0;i<fields.length;i++){
  103. varfield=fields[i];
  104. varcol=$(target).datagrid("getColumnOption",field);
  105. if(col){
  106. varvalue=rowData[field];
  107. //获取用户定义的单元格样式，入参包括：单元格值，当前行数据，当前行索引(从0开始)
  108. varstyle=col.styler?(col.styler(value,rowData,rowIndex)||""):"";
  109. //如果是隐藏列直接设置display为none，否则设置为用户想要的样式
  110. varstyler=col.hidden?"style=\"display:none;"+style+"\"":(style?"style=\""+style+"\"":"");
  111. cc.push("<tdfield=\""+field+"\""+styler+">");
  112. //如果当前列是datagrid组件保留的ck列时，则忽略掉用户定义的样式，即styler属性对datagrid自带的ck列是不起作用的。
  113. if(col.checkbox){
  114. varstyler="";
  115. }else{
  116. varstyler="";
  117. //设置文字对齐属性
  118. if(col.align){
  119. styler+="text-align:"+col.align+";";
  120. }
  121. //设置文字超出td宽时是否自动换行(设置为自动换行的话会撑高单元格)
  122. if(!opts.nowrap){
  123. styler+="white-space:normal;height:auto;";
  124. }else{
  125. /**
  126. *并不是nowrap属性为true单元格就肯定不会被撑高，这还得看autoRowHeight属性的脸色
  127. *当autoRowHeight属性为true的时候单元格的高度是根据单元格内容而定的，这种情况主要是用于表格里展示图片等媒体。
  128. */
  129. if(opts.autoRowHeight){
  130. styler+="height:auto;";
  131. }
  132. }
  133. }
  134. //这个地方要特别注意，前面所拼接的styler属性并不是作用于td标签上，而是作用于td下的div标签上。
  135. cc.push("<divstyle=\""+styler+"\"");
  136. //如果是ck列，增加"datagrid-cell-check"样式类
  137. if(col.checkbox){
  138. cc.push("class=\"datagrid-cell-check");
  139. }
  140. //如果是普通列，增加"datagrid-cell-check"样式类
  141. else{
  142. cc.push("class=\"datagrid-cell"+col.cellClass);
  143. }
  144. cc.push("\">");
  145. /**
  146. *ck列光设置class是不够的，当突然还得append一个input进去才是真正的checkbox。此处未设置input的id，只设置了name属性。
  147. *我们注意到formatter属性对datagird自带的ck列同样不起作用。
  148. */
  149. if(col.checkbox){
  150. cc.push("<inputtype=\"checkbox\"name=\""+field+"\"value=\""+(value!=undefined?value:"")+"\"/>");
  151. }
  152. //普通列
  153. else{
  154. /**
  155. *如果单元格有formatter，则将formatter后生成的DOM放到td>div里面
  156. *换句话说，td>div就是如来佛祖的五指山，而formatter只是孙猴子而已，猴子再怎么变化翻跟头，始终在佛祖手里。
  157. */
  158. if(col.formatter){
  159. cc.push(col.formatter(value,rowData,rowIndex));
  160. }
  161. //操，这是最简单的简况了，将值直接放到td>div里面。
  162. else{
  163. cc.push(value);
  164. }
  165. }
  166. cc.push("</div>");
  167. cc.push("</td>");
  168. }
  169. }
  170. //返回单元格字符串，注意这个函数内部并未把字符串放到文档流中。
  171. returncc.join("");
  172. },
  173. /**
  174. *刷新行数据，只有一个行索引(从0开始)，调用的updateRow方法，这里直接跳过。
  175. *@param{DOMobject}targetdatagrid实例的宿主table对应的DOM对象
  176. *@param{number}rowIndex行索引(从0开始)
  177. *@return{undefined}未返回数据
  178. */
  179. refreshRow:function(target,rowIndex){
  180. this.updateRow.call(this,target,rowIndex,{});
  181. },
  182. /**
  183. *刷新行数据，该接口方法肩负着同步行高，重新计算和布局grid面板等重任
  184. *@param{DOMobject}targetdatagrid实例的宿主table对应的DOM对象
  185. *@param{number}rowIndex行索引(从0开始)
  186. *@param{jsonobject}行数据
  187. *@return{undefined}未返回数据
  188. */
  189. updateRow:function(target,rowIndex,row){
  190. varopts=$.data(target,"datagrid").options;
  191. varrows=$(target).datagrid("getRows");
  192. $.extend(rows[rowIndex],row);
  193. varstyle=opts.rowStyler?opts.rowStyler.call(target,rowIndex,rows[rowIndex]):"";
  195. functionupdateTableRow(frozen){
  196. varfields=$(target).datagrid("getColumnFields",frozen);
  197. //这个地方查找grid的数据主体表格(可能包含冻结列对应的主体表格和普通列对应的主体表格)
  198. //getTr这个函数，我在博客上介绍过，请参考：http://www.easyui.info/archives/396.html
  199. vartr=opts.finder.getTr(target,rowIndex,"body",(frozen?1:2));
  200. varchecked=tr.find("div.datagrid-cell-checkinput[type=checkbox]").is(":checked");
  201. //这里调用了renderRow方法来重新获取当前行的html字符串
  202. tr.html(this.renderRow.call(this,target,fields,frozen,rowIndex,rows[rowIndex]));
  203. tr.attr("style",style||"");
  204. //更新的时候保留checkbox状态(包含两层信息:一是有ck列;二是ck列被之前就被选中)
  205. if(checked){
  206. tr.find("div.datagrid-cell-checkinput[type=checkbox]")._propAttr("checked",true);
  207. }
  208. };
  209. //更新冻结列对应的行
  210. updateTableRow.call(this,true);
  211. //更新普通列对应的行
  212. updateTableRow.call(this,false);
  213. //重新布局表格面板
  214. $(target).datagrid("fixRowHeight",rowIndex);
  215. },
  216. insertRow:function(target,rowIndex,row){
  217. varstate=$.data(target,"datagrid");
  218. //options
  219. varopts=state.options;
  220. //documentofdatagrid
  221. vardc=state.dc;
  222. vardata=state.data;
  223. //兼容无效的rowIndex，默认设置为在最后一行追加
  224. if(rowIndex==undefined||rowIndex==null){
  225. rowIndex=data.rows.length;
  226. }
  227. //为啥不跟上面的条件并到一起，真是蛋疼
  228. if(rowIndex>data.rows.length){

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved