$e 可编辑表格工具方法
datagrid行编辑在数据显示中特别常见，而且面临的需求也复杂多样，为了满足需求实现，提供了多个工具方法。工具方法全部集中在js/plus/easygridEdit.extend.js中，如果需要调用行编辑请在require的时候增加调用easygridEdit,如下：
require(["easygridEdit","pub"],function($e){
// 可使用 $e上的工具方法
});
$e.editRow
触发编辑行事件，配合 datagrid 中 columns 的编辑控件使用。
...
{title:'诊断名称',field:'diagName',width:300, editor: {
type: 'combobox', options: {
...
}
},
{title:'数量',field:'num',width:300, editor: {
type:'numberbox',
options:{
validType:'sInt["数量必须为大于0的正整数"]',
required:true,
missingMessage:'请填写数量'
}
},
...
$e.editRow 方法一般在 datagrid的 onClickCell 方法中使用，点击单元格时触发编辑行：
onClickCell: function (index, field, value) {
$e.editRow({
//示例：
grid : '#gridBox',//对应的grid，为#gridBox 可省略此配置
index: index, //编辑当前index 行
focusField: 'diagName',//没有点中边编辑单元格时，默认聚焦的输入字段
cellField: field, //编辑当前对应输入框
rowCanEdit : gridCanEdit,//返回 true / false来判断选中行是否可编辑
onEndEdit : gridEndEdit//退出行编辑时执行函数
...
});
}
所有参数：
$e.editRow({
grid : '#gridBox',//对应的grid，默认为#gridBox
index : null,//行index
cellField : null,//当前cell 的field
focusField : null,//默认focus的字段
canAdd : true,//行末尾回车是否可以新增行
rowCanEdit : null,//function ($row,o.index) {}判断某行是否可以编辑，如果有函数return true才可以编辑，否则不可以编辑
canChangeRow : true,//可键盘换行
onBeforeEdit : function (index,$grid) {},//进入编辑之前回调
onEnterCellFocus : function($cell){},//当单元格进入编辑聚焦时触发
onEndOneCellEdit : function($cell){},//当单元格结束编辑时回调
onEnterNextRow : null,//回车换行回调函数
onEndEdit : null,//当行退出编辑时执行
initData : {}//新增行初始化默认数据
});
$e.addNewRow
插入编辑行，在工具栏通过工具按钮，或者某些方法触发插入行
所有参数：
$e.editRow({
grid : '#gridBox',// 对应的grid，默认为#gridBox
focusField : null,//默认focus的字段
canAdd : true,//行末尾回车是否可以新增行
rowCanEdit : null,//function ($row,o.index) {}判断某行是否可以编辑，如果有函数return true才可以编辑，否则不可以编辑
canChangeRow : true,
onBeforeEdit : function (index,$grid) {},//进入编辑之前回调
onEnterCellFocus : function($cell){},//当单元格进入编辑聚焦时触发
onEndOneCellEdit : function($cell){},//当单元格结束编辑时回调
onEnterNextRow : null,//回车换行回调函数
onEndEdit : null,//当行退出编辑时执行
initData : {}//新增行初始化默认数据
});
运行效果
示例代码
$grid.newGrid("#gridBox",{
tools:[[
{iconCls:'plus_sign',text:'新增',title:'新增',click: function(){
//开启新增行
$e.addNewRow({
focusField : 'diagName', //插入时聚焦的输入字段
grid : '#gridBox', //编辑的gridBox，为 #gridBox 可以省略
initData : { //插入行时，行的初始化数据
diagTypeCode : nowNode.diagTypeCode,
diagTypeName : nowNode.name,
creatorName : nowNode.creatorName,
version : version,
versionName : versionName
},
rowCanEdit : gridCanEdit, //返回 true / false来判断选中行是否可编辑
onEndEdit : gridEndEdit //退出行编辑时执行函数
});
}}
]],
singleSelect : true,//行编辑，必须为单选模式
columns:[[
{title:'id',field:'id',hidden:true},
{title:'操作',field:'op',width:80,formatter : function(val,row,index){
return '<span class="icon-del s-op-del" rel="'+(row.id?row.id:" ")+'"="" title="删除"></span>';
}},
{title:'诊断名称',field:'diagName',width:300,titletip:true,align:'left', editor: {
type: 'combobox', options: { //参数同 combobox参数
valueField: 'diagName',
textField: 'diagName',
// data: specialInfoD,
// url : base + '/ui/based/diag/getPrincipalDiag',
missingMessage: '请填写诊断名称',
required: true,
mode : 'remote',
loader : function(param,success){
if(param.q && param.q.length>1){
$.ajax({
type : 'post',
url : '${base}/ui/based/diag/getPrincipalDiag',
data : {
diagVersions : $('#version').combobox('getValue'),
likeNameOrFsOrIcd : param.q
},
success : function(result) {
success(result);
}
});
}
},
onSelect : function (record){
var newData = {
diagId : record.id //联动设置 diagId
};
// window.console && console.log(newData);
$e.setCellVals(newData);//更新需要同步的单元格值
}
}
}},
//只读行用来联动数据
{title:'诊断编码',field:'diagId',width:100,editor:{type:'readonly'},hidden:true},
{title:'诊断版本',field:'versionName',width:150,titletip:true,align:'left'},
{title:'创建人',field:'creatorName',width:100},
{title:'创建时间',field:'createDate',width:160}
]],
onClickCell: function (index, field, value) {
//点击单元格时触发行编辑
$e.editRow({
grid: '#gridBox',//编辑的gridBox，为 #gridBox 可以省略
index: index, //编辑当前index 行
focusField: 'diagName',//插入时聚焦的输入字段
cellField: field, //编辑当前对应输入框
initData : {//编辑换行时，插入行，行的初始化数据
diagTypeCode : nowNode.diagTypeCode,
diagTypeName : nowNode.name,
creatorName : nowNode.creatorName,
version : version,
versionName : versionName
},
rowCanEdit : gridCanEdit,//返回 true / false来判断选中行是否可编辑
onEndEdit : gridEndEdit//退出行编辑时执行函数
});
},
onLoadSuccess : function (data) {
},
url:'${base}/ui/based/dcgDiagTypeDetail/grid',
// height: 'auto',
offset : 0
});
editor 新增类型
行编辑 editor 属性，对应的编辑类型除了 easyui默认提供的 text,textarea, checkbox,numberbox, validatebox,datebox, combobox,combotree 这些类型外，为了满足开发需求，我们还新增了几个新的类型:
| 类型名称 | 说明 |
|---|---|
| readonly | 只读类型，方便其他编辑组件联动输入框的值 |
| my97 | 日期控件，方便选则日期和时间 |
| colorPicker | 颜色选择器，需要配合调用 soColorPicker组件调用使用 |
(扩展在 /js/lib/easyui/jquery.easyui.base.extend.js 中)
editor 增加支持方法
| 方法名 | 参数值 | 描述 |
|---|---|---|
| focus | ($input,value) | 编辑框获取焦点时回调事件 |
| keyup | ($input,value) | 编辑框按下按键时回调事件 |
| blur | ($input,value) | 编辑框失去焦点时回调事件 |
示例代码：
...
{title:'文字',field:'txt',editor:{type:'diy',
options:{
focus:function(input,v){
console.log(v);
},
keyup:function(input,v){
console.log(v);
}
}
}},
...
{title:'验证框',field:'string',editor:{type:'diy',
options:{
blur:function(input,v){
console.log(v);
}
}
}},
...
$e 行编辑相关工具方法
| 方法名 | 参数值 | 描述 |
|---|---|---|
| getCell | (field,grid) | 获取当前编辑行 field 对应的编辑框，返回的是编辑框的jquery对象 |
| getCellVals | (fields,grid) | 获取当前编辑行某列的值 |
| setCellVals | (data,grid) | 设置当前编辑行某些列的值，注意set方法仅对编辑单元格生效，如列不需要编辑仅联动设置，请在列上添加 editor:{type:'readonly'}属性 |
| disableAdd | (grid) | 禁止新增行 |
| canAdd | (grid) | 允许新增行 |
| disableEdit | (grid) | 禁止整体编辑行 |
| canEdit | (grid) | 允许整体编辑行 |
| canvalidateGridEdit | (grid,o) | 不进入编辑状态对grid的数据有效性进行验证 |
| endEditing | (grid) | 结束行编辑，返回 状态，如果没有通过验证，无法结束编辑，返回false，可结束返回 true |
| ifEndEdit | (fn,grid) | 判断是否处在编辑状态，编辑状态退出执行事件 |
代码示例：
//根据feild名称 获取编辑输入框对象，datagrid id 为 'gridBox'时，第二个参数可以省略
var $cell = $e.getCell('fieldA'，'#gridBox');
//获取输入框值
var val = $e.getCellVals('a');//datagrid id 为 'gridBox'时，第二个参数可以省略，返回字符串
var vals = $e.getCellVals(['a','b'],'#gridDetailsBox');//返回对象，如： <code>{a:av,b:bv}</code>
//设置输入框值
$e.setCellVals({a:1,b:2});//datagrid id 为 'gridBox'时，第二个参数可以省略
//禁止新增行
$e.disableAdd('#gridBox');//datagrid id 为 'gridBox'时可省略参数
//允许新增行
$e.canAdd('#gridBox');//datagrid id 为 'gridBox'时可省略参数
//禁止整体编辑行
$e.disableEdit('#gridBox');//datagrid id 为 'gridBox'时可省略参数
//允许整体编辑行
$e.canEdit('#gridBox');//datagrid id 为 'gridBox'时可省略参数
//不进入编辑状态对grid的数据有效性进行验证
$e.validateGrid('#gridBox');//datagrid id 为 'gridBox'时可省略参数
$e.validateGrid('#gridBox',{checked：true});//只验证勾选行
//结束行编辑
$e.endEditing('#gridBox');//结束行编辑
//判断是否处在编辑状态，编辑状态退出执行事件
$e.ifEndEdit(function(){
//如果可结束执行事件
}'#gridBox');
$e 成组、解组、移动等操作工具方法
行在合并、分组、移动后，在获取数据时也会有很多麻烦的操作，所以特别做了一些方法包装，如下：
| 方法名 | 参数值 | 描述 |
|---|---|---|
| getGroupFieldByRow | (opt) | 根据row信息返回field，主要用在有成组行，返回对应组行的所有field信息，默认返回数组 |
| geteRowsByRowIndex | (opt) | 根据勾选的row index 返回成组的多行 |
| moveRow | (opt) | 向上或向下移动行,afterFnLoadRows为false，则不会真正移动，而是返回整理后的rows数据 |
| initMergeRows | (opt) | 根据数据初始化合并行成组，一般用在 datagrid onLoadSuccess函数中 |
| mergeRowsCells | (opt) | 合并行单元格 |
| splitRowsCells | (opt) | 拆分已合并的单元格 |
| getCheckedRows | (opt) | 获取勾选行，可以获取成组后的多行 |
代码示例：
//根据row信息返回field，主要用在有成组行，返回对应组行的所有field信息
var fields = $e.getGroupFieldByRow({
grid : '#gridBox',//grid的id
row : null,//需要传入被选择的行数据
groupIds: 'groupId',//组标识
field : 'id',//需要返回的field
returnString : false,//返回格式是否是字符串，默认为数组
});
//根据勾选的row index 返回成组的多行
var rows = $e.geteRowsByRowIndex({
// grid : '#gridBox',//grid
groupIds : 'combiSeq',//成组的标识
move : 'up',
allRows : [],
rowIndex : null
});
//向上或向下移动行,afterFnLoadRows为false，则不会真正移动，而是返回整理后的rows数据
var rows = $e.moveRow({
grid : '#gridBox',//grid
groupIds : 'combiSeq',//成组的标识
move : 'up',//up|down
afterFnLoadRows : true //计算完是否直接加载Rows
});
//根据数据初始化合并行成组，一般用在 datagrid onLoadSuccess函数中
var rows = $e.initMergeRows({
grid : '#gridBox',//grid
groupIds : 'groupId',//成组的标识
data : {},//如果有data，则直接使用data
hideCheckbox : true,
groupKeys : null,//成组key
strArr : null,//需要合并的字段，为数组
callback : null//返回事件
});
//合并行单元格
var rows = $e.initMergeRows({
grid : '#gridBox',//grid
strArr : [],//需要合并的字段，为数组
data : null,
callback : null,//返回事件
hideCheckbox : true,
needMsg :true
});
//拆分已合并的单元格
var rows = $e.splitRowsCells({
grid : '#gridBox',//grid
groupNO : null,//是否需要重置groupNO，需要则填写对应字段名，null则不需要
data : null,
callback : null//返回事件
});
//获取勾选行，可以获取成组后的多行
var rows = $e.initMergeRows({
grid : '#gridBox',//grid
data : null,//可以手动传入checked的行数据，为null获取当前checked行
});