jqGrid 单元格编辑 自定义下拉选择框 动态数据源 通用实现 |
您所在的位置：网站首页 › jqgrid双击事件 › jqGrid 单元格编辑 自定义下拉选择框 动态数据源 通用实现 |
jqGrid 单元格编辑 自定义下拉选择框 动态数据源 通用实现
|
jqGrid编辑类型可分为：单元格编辑(Cell editing)、行内编辑(Inline editing)和表单编辑(Form editing)，本文讨论单元格编辑模式下，下拉选择框的通用实现。jqGrid自带下拉选择框编辑类型，只要设置edittype='select’并设置editoptions即可。如果显示文本与值一致则很简单，如果不一致，则需要通过formatter显示文本，unformat取值，虽说代码量不大，但每个下拉都需要formatter和unformat，另外，如果下拉数据是动态数据源（每行下拉数据可能不一样），jqGrid自带下拉就更加捉襟见肘，因此我们需要一种更通用的解决方案。 1、jqGrid自身实现参考jqGrid user-guide，单元格编辑类型若为下拉选择框类型，则colModel设置如下： colModel : [ ... {name:'myname', edittype:'select', editoptions:{value:{1:'One',2:'Two'}} }, ... ]进入单元格编辑时，jqGrid会渲染如下select: One Two为了书写方便，editoptions: { value: “FE:FedEx; IN:InTime; TN:TNT” }也可以这样写，注意最后没有分号，渲染select如下： FedEx InTime TNT 2、custom edittypejqGrid为了丰富单元格编辑类型，提供了custom edittype，自定义编辑器，user-guide如此解释custom edittype: This edit type allows definition of a custom editable element. When the edit type is set to custom we should provide a set of two functions, one which creates the element, and one that gets and sets the value from in form in order to be posted to the server. The functions that should be defined are custom_element and custom_value. See the editoptions below for more details 核心就是2个东西： custom_element，自定义编辑器如何显示，UI层面custom_value，自定义编辑器如何取值，数据层面继续user-guide提供的案例代码： function myelem (value, options) { var el = document.createElement("input"); el.type="text"; el.value = value; return el; } function myvalue(elem, operation, value) { if(operation === 'get') { return $(elem).val(); } else if(operation === 'set') { $(elem).val(value); } } jQuery("#grid_id").jqGrid({ ... colModel: [ ... { name:'price', ..., editable:true, edittype:'custom', editoptions: { custom_element: myelem, custom_value:myvalue } }, ... ] ... }); 3、基于custom edittype的jqgrid单元格下拉编辑通用实现1）colModel增加一个隐藏列，下拉列如下设置： colModel: [ ... {label: "单位3-id", name: "unit3_id", width: 60, hidden:true}, {label: "单位3", name: "unit3", width: 60, editable:true, edittype:'custom', editoptions: jqgSelect({ hiddenCol: "unit3_id", dataSource: {rows: getUnit3, valueField:"value", textField:"text"}})}, ... ]unit3_id为隐藏列用于取值，unit3为编辑列，jqgSelect为一个通用的函数实现。 2）jqgSelect代码片段 var jqgSelect = function (options) { /** * jqgSelect是个阉割的函数，只表示可以这样实现，给大家提供一个思路。 * options:{dataSource:{rows:[]|fn, valueField, textField}, hiddenCol: colName} * dataSource.rows可以是一个数组，也可以是一个函数，既然是一个函数，就可以是动态数据，每行下拉数据可以不一样. * jqgrid 5.x版本,options可以直接返回rowId */ var jqgSelect_element = function (value, options) { //select创建, toDataSourceRows var ds = $.extend(true, {}, options.dataSource), colId = options.id, rowId = colId.substring(0, colId.indexOf(options.name)-1), gridId = options.gridId || $("#" + rowId).parents("table").attr("id"); var row = $("#" + gridId).jqGrid("getRowData", rowId); if(typeof ds == "object" && typeof ds.rows == "function") { ds.rows = ds.rows(row, gridId, rowId); } var selectOptions = ""; for(var i = 0, l=ds.rows.length; i //select value赋值 var rowId = $(elem).data('rowid'); var hiddenCol = $(elem).data('hiddencol'); $("#" + $(elem).data('gridid')).jqGrid("setCell", rowId, hiddenCol, elem ? $(elem).val() : ''); return $(elem).find('option:selected').text(); } options = options || {}; options.custom_element = jqgSelect_element; options.custom_value = jqgSelect_value; return options; }3）编辑完后取值 var rowData = $("#orders").jqGrid("getRowData","1"); console.log("unit3_id, unit3: ", rowData.unit3_id, rowData.unit3);4）动态数据下拉，只要设置dataSource.rows为一个函数即可。 4、案例说明页面截图： 页面操作说明： 1）自带select-1jqgrid自带下拉，显示文本与值一致，所以最简单 2）自带select-2jqgrid自带下拉，显示文本与值不一致，所以需要： unit2Formatter，显示文本unit2UnFormatter，取值 3）Custom select基于custom类型的下拉编辑框通用实现： 需要colModel增加隐藏列，并在jqgSelect指定hiddenColjqgSelect，关键函数，功能上做了部分阉割，不影响工作原理说明；dataSource.rows，可以是一个数组，也可以取值函数getUnit3(row, gridId, rowId) ，案例的取值函数，row是该行数据，gridId表格id，rowId行号，如果是ajax请求建议使用同步请求。 |
页面代码：【本文地址】
今日新闻 |
推荐新闻 |