當前位置:編程學習大全網 - 源碼下載 - EasyUi Datagrid中footer修改行樣式的問題。

EasyUi Datagrid中footer修改行樣式的問題。

默認的'rowStyler' 選項不支持footer,想讓footer支持rowStyler的話,dategird就得重寫。代碼如下。

var?myview?=?$.extend({},?$.fn.datagrid.defaults.view,?{

renderFooter:?function(target,?container,?frozen){

var?opts?=?$.data(target,?'datagrid').options;

var?rows?=?$.data(target,?'datagrid').footer?||?[];

var?fields?=?$(target).datagrid('getColumnFields',?frozen);

var?table?=?['<table?class="datagrid-ftable"?cellspacing="0"?cellpadding="0"?border="0"><tbody>'];

for(var?i=0;?i<rows.length;?i++){

var?styleValue?=?opts.rowStyleropts.rowStyler.call(target,?i,?rows[i])?:?'';

var?style?=?styleValue'style="'?+?styleValue?+?'"'?:?'';

table.push('<tr?class="datagrid-row"?datagrid-row-index="'?+?i?+?'"'?+?style?+?'>');

table.push(this.renderRow.call(this,?target,?fields,?frozen,?i,?rows[i]));

table.push('</tr>');

}

table.push('</tbody></table>');

$(container).html(table.join(''));

}

});

$('#list').datagrid({

?view:myview

?});

<table?id?=?"list"?class="easyui-datagrid"?title="投資情況統計表"?style="width:960;"fixRowHeight="true"?

data-options="rownumbers:false,singleSelect:true,url:'<%=webRoot?%>/hqswq/report/tzqkInfo.do?nf=<%=nf?%>',method:'get',showFooter:?true,rowStyler:?function(index,row){

if?(row.fg?==?'總計'){

return?'background-color:#6293BB;color:#fff;font-weight:bold;';

}

}">

這是效果

  • 上一篇:輕松旅行系統源代碼
  • 下一篇:免費音樂播放器
  • copyright 2024編程學習大全網