EasyUI框架02——datagrid
datagrid是easyUI使用比较常用的一个组件，列表等基本功能的使用，可以参考easyUI的API。
1. Editor的用法
editor编辑器是easyUI中比较重要的一个东东，在其他组件中都有其身影。
1.1 常用API
1.1.1 获取
1）获取编辑器
获取索引值为index，字段field的编辑器
var editor = $(this).datagrid('getEditor', {index: index, field: field});2）获取编辑器数据
1. 获取combobox的数据
var editors = $('#product_info_table').datagrid('getEditors', index);
productName = editors[0].target.combobox('getValue');2. 获取input的数据
var editors = $('#product_info_table').datagrid('getEditors', index);
productName = editors[1].target.val();1.1.2 编辑器的生命周期
1）开始编辑器
$("#id").datagrid('beginEdit', index);2）结束编辑器
$("#id").datagrid('endEdit', currentEditIndex);3）取消编辑器
$("#product_info_table").datagrid('cancelEdit',index);1.1.3 聚焦到编辑行
$(editor.target).focus();1.2 动态编辑器
1.2.1 定义
/*
* 动态Editor
* */
function initEditor(type){
if(type === 'treegrid'){
$.extend($.fn.treegrid.methods, {
addEditor : function(jq, param) {
if (param instanceof Array) {
$.each(param, function(index, item) {
var e = $(jq).treegrid('getColumnOption', item.field);
e.editor = item.editor; });
} else {
var e = $(jq).treegrid('getColumnOption', param.field);
e.editor = param.editor;
}
},
removeEditor : function(jq, param) {
if (param instanceof Array) {
$.each(param, function(index, item) {
var e = $(jq).treegrid('getColumnOption', item);
e.editor = {};
});
} else {
var e = $(jq).treegrid('getColumnOption', param);
e.editor = {};
}
}
});
}
if(type === 'datagrid'){
$.extend($.fn.datagrid.methods, {
addEditor : function(jq, param) {
if (param instanceof Array) {
$.each(param, function(index, item) {
var e = $(jq).datagrid('getColumnOption', item.field);
e.editor = item.editor; });
} else {
var e = $(jq).datagrid('getColumnOption', param.field);
e.editor = param.editor;
}
},
removeEditor : function(jq, param) {
if (param instanceof Array) {
$.each(param, function(index, item) {
var e = $(jq).datagrid('getColumnOption', item);
e.editor = {};
});
} else {
var e = $(jq).datagrid('getColumnOption', param);
e.editor = {};
}
}
});
}
}1.2.2 使用
// 动态添加编辑器
for(var i = colFlag+1 ; i < 13 ; i++){
$("#grid").treegrid('addEditor',[ //添加cardNo列editor
{field:("month"+i),editor:{
type:'numberbox',
options:{
required:true,
precision:4
}
}
}]);
}2. datagrid的常用API
1）'loadData'与checkAll的用法
$("#dtsTable").datagrid('loadData', data).datagrid("checkAll");2）选中某行'selectRow'
$("#dtsTable").datagrid('selectRow',index);3）更新某行的数据'updateRow'
$("#dtsTable").datagrid('updateRow', {index: index,row:{data:row}});
$("#dtsTable").datagrid('updateRow', {index: index,row:{owner:row.owner}});
$('#grid').treegrid('updateRow',{index: index,row: JSON.parse(oldRowStr)});4）获取datagrid的数据
var rows = $("#dtsTable").datagrid('getData').rows
var rowData = $("#product_info_table").datagrid('getRows')5）获取行索引
Var index = $("#changeGrid").datagrid('getRowIndex',rowData[index]);6）删除某行
$("#product_info_table").datagrid('deleteRow',index);7）获取改变的行
var changes = $('#product_info_table').datagrid('getChanges',’ updated’);一般用于editor中
8）插入一行
$('#product_info_table').datagrid('insertRow',{row:newRow});注意：
当插入一行的时候，如果列表为空，那么插入一行的数据不会以列表展示，例如
这时候，需要添加样式
$("div[class='datagrid-body'] table").addClass("datagrid-btable");
例如：
var newRow = {
productName: '',
emuiVersion: '',
projectType: '',
marketType: '',
finishDate: '',
ratio: ''
};
function addPlanInfo(){
$("#addPlanInfo").bind('click',function(){
$('#product_info_table').datagrid('insertRow',{row:newRow});
$("div[class='datagrid-body'] table").addClass("datagrid-btable");
// 插入时候，触发编辑事件
newIndex = $('#product_info_table').datagrid("getRowIndex",newRow);
editRow(newIndex,true); // true表示为新增的编辑
})
}9）刷新表格
$('#grid').datagrid('reload');3. 合并单元格
3.1 定义
$.extend($.fn.datagrid.methods, {
autoMergeCells: function(jq, fields) {
return jq.each(function() {
var target = $(this);
if (!fields) {
fields = target.datagrid("getColumnFields");
}
var rows = target.datagrid("getRows");
var i = 0,
j = 0,
temp = {};
for (i; i < rows.length; i++) {
var row = rows[i];
j = 0;
for (j; j < fields.length; j++) {
var field = fields[j];
var tf = temp[field];
if (!tf) {
tf = temp[field] = {};
tf[row[field]] = [i];
} else {
var tfv = tf[row[field]];
if (tfv) {
tfv.push(i);
} else {
tfv = tf[row[field]] = [i];
}
}
}
}
$.each(temp,
function(field, colunm) {
$.each(colunm,
function() {
var group = this;
if (group.length > 1) {
var before, after, megerIndex = group[0];
for (var i = 0; i < group.length; i++) {
before = group[i];
after = group[i + 1];
if (after && (after - before) == 1) {
continue;
}
var rowspan = before - megerIndex + 1;
if (rowspan > 1) {
target.datagrid('mergeCells', {
index: megerIndex,
field: field,
rowspan: rowspan
});
}
if (after && (after - before) != 1) {
megerIndex = after;
}
}
}
});
});
});
}
});3.2 使用
例如：将a和b合并
onLoadSuccess:function(data){
$(this).datagrid("autoMergeCells", [‘a’, ‘b’]);
},4. queryParam条件查询
// 给按钮绑定属性
$("#searchStave").bind('click', function(){
// $("#grid").datagrid('reload');
//查询参数直接添加在url中
//查询参数直接添加在queryParams中
var queryParams = $('#grid').datagrid('options').queryParams;
queryParams.product = $("#product").combobox('getValue');
queryParams.product_model = $("#product_model").val();
queryParams.zone = $("#zone").val();
queryParams.operator = $("#operator").val();
$('#grid').datagrid('options').queryParams=queryParams;
$("#grid").datagrid('reload');
});