页面显示效果:html
html页面设置datagrid的field字段:数组
userList是从struts2传到前台的一个集合,该集合是用户的集合,每一个用户有一个消耗,field根据userList来设置多个消耗字段函数
<s:iterator value="userList" id="user" status='s'> <s:if test="(#s.index+1)==userList.size()"> <th field="consumptions<s:property value='%{#s.index+1}'/>" width="75" sortable="false" align="center" editor="{type:'numberbox',options:{precision:3}}" formatter="consumption2Formatter">终审<s:hidden uname='%{#user.id}' value="%{#user.id}" theme="simple"/></th> </s:if> <s:else> <th field="consumptions<s:property value='%{#s.index+1}'/>" width="75" sortable="false" align="center" editor="{type:'numberbox',options:{precision:3}}" formatter="consumption2Formatter"><s:property value="#s.index+1"/>审<s:hidden uname='%{#user.id}' value="%{#user.id}" theme="simple"/></th> </s:else> </s:iterator>
在JS中formatter函数的设置:(在userList中的每一个用户对应的消耗的格式为:1审,2审...,最后面为终审,这里是根据1,2...在consumption2Formatter中设置索引值,来获取row.consumptions中取值,row.consumptions是每一个用户的消耗集合,它是一个数组,和userList集合对应)ui
/** * 从row的consumptions中根据索引值num取对应的消耗值 */ function consumption2Formatter(value, row,rowIndex){ var title = this.title; title = title.substring(0,title.indexOf("审")); var num = title.replace(/[^0-9]/ig,""); if(!num || num==""){ //代表为终审 num = row.consumptions[row.consumptions.length-1]; }else{ num = row.consumptions[parseInt(num)-1]; } return num; }
easyui的datagrid的双击事件:this
onDblClickCell: function(rowIndex, field, value){ }
若是利用formatter设置显示的内容的时候,在该事件中会发现value为undefined,那么在onDblClickCell函数中如何获取单元格的实际值呢?code
/** * @table datagrid的id字符串 * @param rowIndex 被双击的行的索引值 * @param field 被双击的行的字段名 */ function getFormatterValue(table,rowIndex,field){ var val = $("#datagridPanel").find("#datagrid-row-r1-2-"+rowIndex+"").find(".datagrid-cell.datagrid-cell-c1-"+field+"").text(); return parseFloat(val); }
能够F12在控制台,查看datagrid的元素组成,ID为datagrid-row-r1-2-"+rowIndex+"获取td,而后td中是一个div,在div中是formatter中设置的显示内容orm
datagrid的大体结构如上htm