# EditorTable 可编辑table

# 使用说明


第一步：需要在界面上引入相应的js文件和css文件。
▼显示代码

第二步： 在界面上定义一个div

▼显示代码

第三步：渲染对象

▼显示代码

# 参数列表

参数 说明 类型 可选值 默认值
colModel 表格列定义 Array 自定义
---------- display 显示的列名称 string 自定义
---------- name 对应的后台字段名字 string 自定义
---------- type 编辑类型的定义 string data10、ed、ro等 ed
---------- sortable 是否可以排序 boolean true/false true
---------- defVal 新增时候，默认值 string 自定义
---------- width 列宽 string/number 自定义/small/big/medium
---------- validator 校验函数,存在系统默认校验和用户自定义校验2种方式 string/function 自定义
---------- validatorMsg 校验提醒消息 string 自定义
height 表格的高度 Number 自定义
containerId 出现滚动条的容器id，如果是body出现滚动条则不需要设置 String 自定义
parentId 指定父元素ID，来适应其宽高 String 自定义
gridType 是否启动自动计算列宽 autoGrid/grid autoGrid
managerName 后台Manager的名称（必须提供该参数） String必须提供 自定义
managerMethod 后台对应Manager的方法名（必须提供该参数） String必须提供 自定义
autoload 设置了managerName、managerMethod后，是否默认加载数据 string 自定义
idField 记录的关键字字段名称 String 自定义 id
onSuccess 成功后执行的函数 function 自定义

高度设置提醒：设置了parentId 可以不设置height，但如果parentId里面存在工具栏或者其他组件，
则建议设置height，可以写成 $("#center").height()-60的形式

gridObj=$("#formulaTable").ajaxEditorGrid({ .... idField:'id', height: $("#center").height()-60, .... });
▼显示代码

编辑类型设置：目前只支持下面这些的编辑类型。

#

# colModel中的type定义类型

type 编辑类型 补充说明
ch CheckBox类型
ra Radiobox类型
txt textArea类型
date 日期10位类型【yyyy-MM-dd】
ed 普通input类型
price 金额类型
ro 只读类型
combo 下拉列类型 请参考列子
showDialog showDialog 请参考列子



# date编辑类型

{ display: $.i18n("common.date.sendtime.label"),//发起时间 name: 'selSysCoding', sortable : true, type: 'date', validator:function(a){ return a.length===10; }, 系统默认的日期格式是%Y-%m-%d 如果需要修改日期的显示格式可以通过监听onDateShow事件来实现 gridObj.attachEvent("onDateShow", function(dateCtl,rId,cInd,gridObj){ if(cInd===1){ gridObj.setDateFormat('%Y-%m-%d %H:%i'); } return true; })
▼显示代码



# combo编辑类型

{display : "${ctp:i18n('common.datatype.label')}",name : 'dataType',width : 'small',sortable : true, type: 'combo' ,validator:'NotEmpty' ,validatorMsg:"${ctp:i18n('ctp.formulas.error.required')}" ,cellFun:function(comboObj){ comboObj.readonly(true); comboObj.addOption([ {value: "1", text: "${ctp:i18n('common.text.label')}"}, {value: "2", text: "${ctp:i18n('ctp.formulas.dataType.numberic')}"}, {value: "3", text: "${ctp:i18n('common.date.time.label')}"}, {value: "4", text: "${ctp:i18n('ctp.formulas.dataType.bool')}"}, {value: "18", text: "${ctp:i18n('common.date.label')}"} ]); } }
▼显示代码



# showDialog编辑类型

{ display: $.i18n("common.date.sendtime.label"),//发起时间 name: 'selUser', sortable : true, type: 'showDialog', cellFun:function(editorObj,cellObj){ //这里可以定义选人弹框操作 createProcessXml(editorObj,cellObj ,"collaboration", getCtpTop(), window, $.ctx.CurrentUser.id, $.ctx.CurrentUser.name, $.ctx.CurrentUser.loginAccountName, "collaboration", $.ctx.CurrentUser.loginAccount, $.i18n('collaboration.newColl.collaboration'), null, null, true, "", getNormalData("process_info")); //协同 }); } }, //业务自行定义的方法 function createProcessXmlCallBack(editor,cellObj,tWindow, res, appName, returnValueWindow, currentUserId, currentUserName, currentUserAccountName, defaultPolicyId, flowPermAccountId, defaultPolicyName){ if(res && res.obj && res.obj.length>0 && res.obj[0].length>0){ console.log(res.obj); var nodeIds = [], personArray = res.obj[0];var nameLabels=[]; for (var i=0, len=personArray.length; i";"); } editor.grid.editStop(); } 其实就是用到下面2个核心方法： //表示为单元格设置值 cellObj.value=nameLabels.join(";"); //停止编辑，即可完成单元格的输入 editor.grid.editStop();
▼显示代码

校验设置：目前系统支持4中类型的校验，系统内置校验3种，还有就是用户自定义校验。

#

# colModel中的validator定义

validator 类型 补充说明
notEmpty 校验是否为空
email 校验邮箱
number 校验数字类型
fun 自己定义校验函数 请参考列子



# 自己定义校验函数

{ display : "${ctp:i18n('ctp.formulas.description')}", name : 'description', width : 'medium', sortable : false, //自己定义校验函数 validator:function(a){ return a.length<=255; }, //自己定义校验消息 validatorMsg:"${ctp:i18n_1('ctp.formulas.error.maxLength',255)}" },
▼显示代码

#

# 方法列表

方法名 说明 参数 1 参数 2 例子
ajaxgridLoad 请求后台数据 params[请求参数] o.type = 'Account';
gridObj.ajaxgridLoad(o);
setCellDisabled 设置某个单元格不可以编辑 id[行id] cInd[列序号] gridObj.setCellDisabled(id,0);
setRowNotEditor 设置某行不可以编辑 gridObj.setRowNotEditor(rowData.id);
addNewRow 新增一行数据 Array[行数据] gridObj.addNewRow(seeyonCom.uid(),gridObj.getDefCellValues());
validate 手动触发列数据校验 eventName[方法名] if(!gridObj.validate()){
return ;
}
getChangeSubmitData 获取发生过变更的数据 var content=gridObj.getChangeSubmitData();
getAllData 获取当前编辑表格所有单元格数据 var content=gridObj.getAllData();
setColumnHidden 根据列序号对列进行隐藏显示 表示第一列进行隐藏 var content=gridObj.setColumnHidden(0,true);
cells 根据行id和列序号获取单元格对象 var cellObj=gridObj.cells(rowId,1);获取第一单元格值
cellObj.setValue("ddd")为第一个单元格设置值
cellObj.getValue() 从第一个单元格获取值

#

# event事件列表

eventName 方法作用 参数 1 参数2 参数2 例子
onCellChanged 单元格发生变化 rId [行id] cInd[列序号] nValue[变化后的单元格值] gridObj.attachEvent("onCellChanged", function(rId,cInd,nValue){....})
onDateShow 弹出日期控件 dateCtl [日期对象] rId[行id] cInd[列序号] gridObj.attachEvent("onDateShow", function(dateCtl,rId,cInd,gridObj){.....})

← 打印 →