easyuidatagrid源碼分析

❶ easyui datagrid列設置checkbox，並能獲取選中的值如圖

在 easyui datagrid 中設置列為 checkbox 並能獲取選中的值，可以按照以下步驟進行操作：
1、在 columns 配置中設置需要顯示 checkbox 的列，示例代碼如下：
columns:[[
{field:'id',title:'ID',width:80},
{field:'name',title:'Name',width:100},
{field:'gender',title:'Gender',width:100},
{field:'checkbox',title:'',checkbox:true},
]],
在這個示例中，第 4 列設置了 checkbox。
2、在 easyui datagrid 的 toolbar 中添加按鈕，並綁定事件，示例代碼如下：
toolbar:[{
text:'Get Selected',
iconCls:'icon-search',
handler:function(){
var rows = $('#dg').datagrid('getSelections');
alert(rows.length+' rows are selected.');
}
}]
在這個示例中，添加了一個名為 "Get Selected" 的按鈕，點擊按鈕會獲取當前選中的行，並彈出提示框顯示選中的行數。
3、在點擊按鈕時獲取選中旁慶念的行，示例代碼如下：
var rows = $('#dg').datagrid('getSelections');
在這個示例中，使用 easyui datagrid 的 getSelections 方法獲取選運困中的行數據。
4、在獲取選中的行後，可以對這些行進行後續的操作，例如對每行進行遍歷，獲取某一列的值，示例代碼如下：
for(var i=0; i<rows.length; i++){
var row = rows[i];
console.log(row.id); // 獲取 id 列的值
}
在這個示例中，差猜使用 for 循環遍歷選中的行數據，然後使用 row.id 獲取 id 列的值。
以上就是在 easyui datagrid 中設置列為 checkbox 並能獲取選中的值的操作步驟。

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

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

varmyview=$.extend({},$.fn.datagrid.defaults.view,{
	renderFooter:function(target,container,frozen){
		varopts=$.data(target,'datagrid').options;
		varrows=$.data(target,'datagrid').footer||[];
		varfields=$(target).datagrid('getColumnFields',frozen);
		vartable=['<tableclass="datagrid-ftable"cellspacing="0"cellpadding="0"border="0"><tbody>'];
		
		for(vari=0;i<rows.length;i++){
			varstyleValue=opts.rowStyler?opts.rowStyler.call(target,i,rows[i]):'';
			varstyle=styleValue?'style="'+styleValue+'"':'';
			table.push('<trclass="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
	});
<tableid="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;';
}
}">

這是效果