easyui的datagrid的editor为combobox,根据每个row的属性的不同,如何动态的设置每个row的combobox的url...
2019独角兽企业重金招聘Python工程师标准>>>
JSP中的元素定义:
<th field="typeMaskValues" width="150" sortable="false" align="center" formatter="typeMaskFormatter" editor="{type:'combobox',
options:{
multiple:true,
required:true,
url:'iface/findTypeMaskList',valueField:'key',textField:'value',panelHeight:150,
//editable:false,
onHidePanel: onHidePanel,
onShowPanel:onShowPanel,
onChange:onChange,
onLoadSuccess:function(data){zdyComboboxArray = data;}
}}">类别掩码
</th>
下拉框的各个函数的定义:
/*** 下拉面板展开事件*/
function onShowPanel(){console.info("onShowPanel");
}
/*** 下拉面板选择事件*/
function onChange(){console.info("onChange");
}
/*** datagrid的复选框隐藏面板事件*/
function onHidePanel(){console.info("hidepanel");var textField = $('.datagrid-editable-input').val();//下拉框必选,不能为空if(comboboxValue.value && textField && textField!=comboboxValue.value){//单选框//var valueField = $('.datagrid-editable-input').next().next().val();//复选框有多个inputvar multipleInputs = $('.datagrid-editable-input').nextAll(':input');var multipleInputsVal = new Array();var j = 0;for(var i=0;i<multipleInputs.length;i++){var multipleInput = multipleInputs[i];var multipleInputVal = multipleInput.value;if(multipleInputVal){multipleInputsVal[j] = multipleInputVal;j++;}}var row = comboboxValue.row;row.typeMaskValues = multipleInputsVal;row.typeMaskTexts = textField;var options = {};options.onAfterSubmit = afterSubmit;_destroyCellEditor($(comboboxValue.id)[0],{index:comboboxValue.rowIndex,field:comboboxValue.field});onAfterEditing(comboboxValue.rowIndex,row,comboboxValue.changes,comboboxValue.id,comboboxValue.url,new Array(),options);endEditing(comboboxValue.id);//此行代码让编辑框被销毁之后还能够再次打开编辑器(例如双击打开)}else{_destroyCellEditor($('#_list')[0],{index:_rowIndex,field:_field});endEditing('#_list');comboboxValue["data"] = comboboxValue.row;afterSubmit(comboboxValue.rowIndex, comboboxValue.row, "",comboboxValue,comboboxValue.id);}_rowIndex = undefined;_field = undefined;_rowId = undefined;comboboxValue = {};
}
为可编辑的单元格设置边框:
//为可编辑的单元格设置外边框
//来自jquery.easyui.1.8.0.js的 function _4d8()方法
function _outerWidthOfEditable(target) {var dc = $.data(target, "datagrid").dc;dc.view.find("div.datagrid-editable").each(function () {var _this = $(this);var field = _this.parent().attr("field");var col = $(target).datagrid("getColumnOption", field);_this._outerWidth(col.width);var ed = $.data(this, "datagrid.editor");if (ed.actions.resize) {ed.actions.resize(ed.target, _this.width());}});
}
单元格编辑函数:
//开启编辑单元格状态
function beginEditCell(target, options) {// var opts = $.data(target, "datagrid").options;
// var tr = opts.finder.getTr(target, options.index);
// var row = opts.finder.getRow(target, options.index);// //暂时还不知道该代码的含义,忽略使用
// if (tr.hasClass("datagrid-row-editing")) {
// return;
// }
// tr.addClass("datagrid-row-editing");_initCellEditor(target, options.index, options.field);_outerWidthOfEditable(target);
// $.validateRow(target, options.index);暂时先不使用,不知道该方法作用
}
初始化表格编辑器:
/*** 初始化表格编辑器*/
function _initCellEditor(target, _index, _field) {var opts = $.data(target, "datagrid").options;var tr = opts.finder.getTr(target, _index);var row = opts.finder.getRow(target, _index);tr.children("td").each(function () {var cell = $(this).find("div.datagrid-cell");var field = $(this).attr("field");if (field == _field) {//找到与传递参数相同field的单元格var col = $(target).datagrid("getColumnOption", field);if (col && col.editor) {var editorType, editorOp;if (typeof col.editor == "string") {editorType = col.editor;} else {editorType = col.editor.type;editorOp = col.editor.options;}var editor = opts.editors[editorType];if (editor) {var html = cell.html();var outerWidth = cell._outerWidth();cell.addClass("datagrid-editable");cell._outerWidth(outerWidth);cell.html("<table border=\"0\" cellspacing=\"0\" cellpadding=\"0\"><tr><td></td></tr></table>");cell.children("table").bind("click dblclick contextmenu",function (e) {e.stopPropagation();});$.data(cell[0], "datagrid.editor", {actions: editor,target: editor.init(cell.find("td"),editorOp),field: field,type: editorType,oldHtml: html});}}$('.datagrid-editable').css('height','auto');//设置包裹该editorde的div的样式$('.datagrid-editable-input').css("line-height","");//设置编辑框的样式tr.find("div.datagrid-editable").each(function () {var field = $(this).parent().attr("field");var ed = $.data(this, "datagrid.editor");var val = row[field];if(ed.type == 'combobox'){//获取编辑器的对应的元素的下拉框的属性集合var opts = $(ed.target).combobox("options");//判断下拉框是否为多选(因为多选的话,在调用setValue方法的时候,会调用val的split方法,如果不包含分隔符",",会报错)if(opts.multiple){val = val+",";}}ed.actions.setValue(ed.target, val);});}});
}
销毁表格编辑框:
//销毁单元格编辑器
function _destroyCellEditor(target, options) {var opts = $.data(target, "datagrid").options;var tr = opts.finder.getTr(target, options.index);tr.children("td").each(function () {var field = $(this).attr("field");if (field == options.field) {//找到与传递参数相同field的单元格var cell = $(this).find("div.datagrid-editable");if (cell.length) {var ed = $.data(cell[0], "datagrid.editor");if (ed.actions.destroy) {ed.actions.destroy(ed.target);}cell.html(ed.oldHtml);$.removeData(cell[0], "datagrid.editor");cell.removeClass("datagrid-editable");cell.css("width", "");}}});
}
单元格编辑之后执行:
function onAfterEditing(rowIndex,row,changes,id,url,arrays,options){var saveData=save(rowIndex,row,changes,id,url,arrays,options);row=saveData[0];changes=saveData[1];afterEdit(rowIndex,row,changes,id);
}
单元格编辑之后向后台发送POST请求:
/*** @param row编辑完单元格修改保存数据* @param changes* row 是修改之后的row,而不是原来的row* @returns {Array}[0]表示row,[1]表示changes*/
function save(index,row,changes,id,url,arrays,options)
{var data={"id":row.id};for (var key in row){if (!$.isArray(row[key]) && !$.isFunction(row[key])&& (typeof row[key]) == "object"){continue;}data["object."+key]=row[key];}$.post(url,data,function(data){var obj=eval('('+data+')');if (obj && obj.returnCode==1){if (options && options.onAfterSubmit && $.isFunction(options.onAfterSubmit)){options.onAfterSubmit(index, row, changes,obj,id);}return;}//$("#_list").datagrid('rejectChanges'); //出错回滚$("#_list").datagrid('reload');$.messager.alert('错误',obj.message,'error');}); var saveData=new Array();saveData[0]=row;//用来作为datagrid的updateRow的参数用,注意有些特例,该row虽然是更改后的row,但是有些需要传递到action中的值并没有发生变化,例如queryRateValues.jsp.jssaveData[1]=changes;return saveData;
}
不重载datagrid,而是单独刷新被修改的行:
function afterEdit(rowIndex, rowData, changes,id){$(id).datagrid('updateRow',{index: rowIndex,row: rowData});$(id).datagrid('acceptChanges');
}
field的formatter事件:
/*** 根据typeCode查询下拉框的列表值* @param value * @param row* @returns {String}*/
function typeMaskFormatter(value,row){this.editor.options.url = "iface/findTypeMaskList?object.typeCode="+row.typeCode;return row.typeMaskTexts;
}
值得注意的是:这么写还不能动态的根据row的typeCode的值来设定该行编辑器combobox的url,这个url是table的表头中的url,虽然在每个行初始化的时候都设定了options的url,但是实际上修改的是同一个元素的url的值,即每次进入formatter函数中,是重新设定了options的url,所以需要在单击事件中跟新每一行:调用datagrid的refresh方法即可:
datagrid的表格双击事件:
onDblClickCell: function(rowIndex, field, value){//return false;var rowData = $(table).datagrid('getRowData',rowIndex);onClickRow(rowIndex, field, value,id,url,arrays,options);},
通用onClickRow()函数:
/*** 开启单击单元格* */
var _rowIndex = undefined;
var _field = undefined;
var _rowId=undefined;
function onClickRow(rowIndex, field, value,id,url,arrays,options) {var columnOption=$(id).datagrid("getColumnOption",field);if(columnOption && columnOption.readonly == true)return false;$(id).datagrid("refreshRow", rowIndex);//这行很关键,是实现combobox动态设定url,每次刷新行,也会刷新这一列的combobox的editor属性,刚好借用来刷新url...if (_rowIndex != rowIndex || _field != field) {if (endEditing(id)){$(id).datagrid('selectRow',rowIndex);$(id).datagrid('beginEditCell', {index: rowIndex, field: field});var ed = $(id).datagrid('getEditor', {index:rowIndex,field:field});if(ed == null)return false;_rowIndex = rowIndex;_field = field;_rowId=id;var row=$(id).datagrid("getRowData",rowIndex);if(ed.type == 'combobox'){//只要下拉框被编辑,那么就点击倒三角形,打开下拉面板选项$(".datagrid-editable-input").next('span').find('.combo-arrow').click();$(".datagrid-editable-input").focus();comboboxValue.row= row;}else{$(".datagrid-editable-input").focus(function(){this.select();});$(ed.target).focus();}$(".datagrid-editable-input").blur(function(){var changes={};if(ed.type=='combobox'){//需要注意的是:如果是下拉框,分为两种情况://1.点击了下拉面板,那么先执行.datagrid-editable-input的blur()事件,此时comboboxValue被赋值,再执行onHidePanel事件//2.没有点击下拉面板,只是点击了面板的其他地方而失去焦点,那么会先执行onHidePanel事件,再执行.datagrid-editable-input的blur()事件,此时comboboxValue并没有被赋值(只是被赋值了一个row属性,其他属性没有被赋值)//1和2两种情况,下拉编辑框的关闭都是放到onHidePanel中执行comboboxValue.id = id;comboboxValue.rowIndex = rowIndex;comboboxValue.field = field;changes['status'] = "p";
// comboboxValue.row = row;comboboxValue.url = url,comboboxValue.changes = changes;comboboxValue.value = $(".datagrid-editable-input").val();}else {if(ed.type=='checkbox'){_destroyCellEditor($(id)[0],{index:rowIndex,field:field});var state = $(this).prop('checked');var obj = checkbox(row,state);if(obj.state){changes["status"]="P";onAfterEditing(rowIndex,row,changes,id,url,arrays,options);}}else{_destroyCellEditor($(id)[0],{index:rowIndex,field:field});var oldVal=row[field];var newVal=this.value;if(oldVal!=newVal){//值有改变changes[field]=newVal;row[field]=newVal;changes["status"]="P";onAfterEditing(rowIndex,row,changes,id,url,arrays,options); }}//因为在下拉框的onHidePanel中需要用到这两个变量,所以这两个变量的置空要放到hiddenpanel中执行_rowIndex = undefined;_field = undefined;}});var rows=$(id).datagrid("getRows");$(ed.target).bind('keydown', function(){switch (window.event.keyCode) {case 13://enter$(this).blur();endEditing(id);event.returnValue=false; if(rowIndex<rows.length-1){onClickRow(rowIndex+1,field,value,id,url,arrays,options);}break;case 37://left$(this).blur();//停止上一个框的编辑endEditing(id);//禁止默认键盘事件event.returnValue=false; var prevfiled=$(id).datagrid("prevColumn",field);if(prevfiled!=null&&prevfiled.editor){onClickRow(rowIndex,prevfiled.field,value,id,url,arrays,options);}break;case 38://up$(this).blur();endEditing(id);event.returnValue=false; if(rowIndex>0){onClickRow(rowIndex-1,field,value,id,url,arrays,options);}break;case 39://right$(this).blur();endEditing(id);event.returnValue=false; var nextfiled=$(id).datagrid("nextColumn",field);if(nextfiled!=null&&nextfiled.editor){onClickRow(rowIndex,nextfiled.field,value,id,url,arrays,options);}break;case 40://down$(this).blur();endEditing(id);event.returnValue=false; if(rowIndex<rows.length-1){onClickRow(rowIndex+1,field,value,id,url,arrays,options);}break;case 27:// Escape Escape $(this).blur();endEditing(id);break;}});}}return true;
}
附上datagrid的combobox的单选框:
<th field="makeRule" width="150" sortable="false" align="center" formatter="makeRuleFormatter" editor="{type:'combobox',options:{required: true,url:'iface/findMakeRuleList',valueField:'key',textField:'value',panelHeight:100,onHidePanel: function(){var textField = $('.datagrid-editable-input').val();if(comboboxValue.value && textField!=comboboxValue.value){var valueField = $('.datagrid-editable-input').next().next().val();var row = comboboxValue.row;row.makeRuleName = textFieldrow.makeRule = valueField;_destroyCellEditor($(comboboxValue.id)[0],{index:comboboxValue.rowIndex,field:comboboxValue.field});onAfterEditing(comboboxValue.rowIndex,row,comboboxValue.changes,comboboxValue.id,comboboxValue.url);endEditing(comboboxValue.id);//此行代码让编辑框被销毁之后还能够再次打开编辑器(例如双击打开)}else{_destroyCellEditor($('#_list')[0],{index:_rowIndex,field:_field});endEditing('#_list');}_rowIndex = undefined;_field = undefined;comboboxValue = {};},onLoadSuccess:function(data){zdyComboboxArray = data;}}}">对应编制办法
</th>
另外设置combobox的显示的text和value:
//类别掩码的类型集合,以","号连接,用来做下拉框的value,因为下拉框可以多选,所以这里使用集合ArrayList或者数组
private List<Integer> typeMaskValues;
//显示类别掩码的名称,用来做下拉框的显示用,可以是集合ArrayList或者数组
private List<String> typeMaskTexts;public List<Integer> getTypeMaskValues() {return typeMaskValues;
}public void setTypeMaskValues(List<Integer> typeMaskValues) {this.typeMaskValues = typeMaskValues;
}public List<String> getTypeMaskTexts() {return typeMaskTexts;
}public void setTypeMaskTexts(List<String> typeMaskTexts) {this.typeMaskTexts = typeMaskTexts;
}
datagrid的editor的target是一个combobox,通过调用它的setValue来设定combobox的value值,然后combobox的会根据它的value值来设定显示值,即能够在input框中看到的文本值,同时让下拉列表的对应的选项处于选中状态;如果combobox是单选,那么会直接根据combobox的value值来设定显示值,同时选中列表选项;如果为多选,那么会根据combobox的value值,先调用split(",")方法得到value的数组,然后循环数组,根据其中的每个value的值设定显示值text(text是追加上去的),同时循环选中下拉列表对应的选项.
效果图:
datagrid的类别掩码显示:
双击单元格,开启编辑,单元格的editor为下拉框,向后台发送不同的请求url,返回指定列表:
转载于:https://my.oschina.net/u/2331760/blog/809883
easyui的datagrid的editor为combobox,根据每个row的属性的不同,如何动态的设置每个row的combobox的url...相关推荐
- 使用EasyUI的Datagrid的Editor进行行编辑,Enter回车结束编辑,并开启新的一行。
//新增数据 function add() { if (Index == undefined) { row = { move_date: '', start_time: '', end_time: ' ...
- datagrid编辑单元格回车换行_使用EasyUI的Datagrid的Editor进行行编辑,Enter回车结束编辑,并开启新的一行。...
//新增数据 function add() { if (Index == undefined) { row = { move_date: '', start_time: '', end_time: ' ...
- EasyUI中datagrid的行编辑模式中,找到特定的Editor,并为其添加事件
有时候在行编辑的时候,一个编辑框的值要根据其它编辑框的值进行变化,那么可以通过在开启编辑时,找到特定的Editor,为其添加事件 // 绑定事件, index为当前编辑行 var editors = ...
- 给Jquery easyui 的datagrid 每行增加操作链接(转载)
转自:http://www.thinkphp.cn/code/207.html 通过formatter方法给Jquery easyui 的datagrid 每行增加操作链接 我们都知道Jquery的E ...
- 给Jquery easyui 的datagrid 每行增加操作链接(转)
http://www.thinkphp.cn/code/207.html 通过formatter方法给Jquery easyui 的datagrid 每行增加操作链接 我们都知道Jquery的Easy ...
- easyui使用datagrid时列名包含特殊字符导致表头与数据错位的问题
做一个用easyui的datagrid显示数据的功能时发现表格的列头与数据错位了,而且这个现象不总是能重现,一直没搞清楚原因.后来偶然在控制台看出了一点端倪: 推测表头或者单元格的class名应该是用 ...
- SSh结合Easyui实现Datagrid的分页显示
近日学习Easyui,发现非常好用,界面很美观.将学习的心得在此写下,这篇博客写SSh结合Easyui实现Datagrid的分页显示,其他的例如添加.修改.删除.批量删除等功能将在后面的博客一一写来. ...
- MVC简捷调用EasyUI的datagrid
一直想在项目中使用EasyUi的datagrid,但种种原因,没有实现. 这两天在开发一个项目中,愿望终于得以实现. 先看效果: 实现步骤是这样的: 1,在页面中画dataGrid,具体代码如下: & ...
- springmvc 后台向页面EasyUI的Datagrid传递数据(JSon格式)
===============EasyUIDatagrid 分页==================== EasyUIDatagrid 需要提供的JSon格式为:total和rows,所以我们只需要在 ...
最新文章
- tkinter项目实战_Python GUI项目实战(二)主窗体的界面设计与实现
- C++利用访函数进行选择排序
- git 工具_Github开源工具分享之自托管GIT服务工具Gogs
- C#中await/async闲说
- Queue Explorer过期处理
- k近邻推荐用到的各种距离
- 小波神经网络模型matlab,神经网络预测模型优点
- C++ 代码实现定义法计算行列式的值
- Greenplum集群扩容总结
- win10无线投屏_win10投屏快捷键无需频繁插拔
- Multisim函数发生器设置问题
- U盘不能分区,不能格式化,解决方案
- Payton编程实现温度转换
- 接连入职五位博士,云和恩墨到底在搞什么大事情?
- halcon机器视觉实例1--表面划痕检测
- NRF24L01 使用小结—1
- Android应用安装流程理解
- 1.Storm-简介
- 微信小程序生成二维码js
- qnx学习笔记-QNX系统下载graphic镜像