jQuery插件 - tableEditor 1.0,表格行内编辑
项目中开发到一半，需要实现表格行内编辑的功能，所以开发了这样一个jQuery的插件，目标是插件不变动已有的表格结构，完全实现插件化，随时安装及卸载。目前1.0还未能实现数据提交到后台保存，待1.1版本更新。
效果图
表格HTML
<table class="tab_list" cellspacing="0" cellspadding="0" width="800" style="margin: 20px;"> <tr> <th data-name="field_text">单行文本</th> <th data-name="field_date">日期</th> <th data-name="field_chk">单选</th> <th data-name="field_mulichk">多选</th> <th data-name="field_textarea">多行文本</th> <th>不参与编辑</th> </tr> <tr> <td>名称</td> <td>10/09/2013</td> <td>石</td> <td>骨角牙,塑料,墨</td> <td>111</td> <td>111</td> </tr> <tr> <td>222</td> <td>11/09/2013</td> <td>漆</td> <td>化学纤维</td> <td>222</td> <td>222</td> </tr> </table>
引入库文件 :
<script src="lib/jQuery.tableEditor.js"></script> <link href="lib/plugins.css" rel="stylesheet" />
jQuery插件方法 $().tableEditor (表格进入编辑模式)：
$("table").tableEditor(option)
参数 option 类型为 Object 时：
包含选项设置
isAddChk 默认true 是否为每行添加checkbox
isFirstHead 默认true 首行是否为列头（过滤首行）
isLastFoot 默认false 尾行是否为列尾（过滤尾行）
isAutoSaveChange 默认true 退出行编辑状态时，自动保存数据 (false时将显示保存和取消按钮)
ctypeControls Object 对应ctype创建控件的对象，可在创建时传递自定义的扩展控件或调用setDefault进行默认全局设置
{
"text":textControl,
"datepicker":datepickerControl
...
}
columns Arrary ，说明： 包含对应行编辑时每列显示配置数组
列配置参数：
ctype : 控件类型(可填写默认自带的控件 text,textarea,datepicker 或自己扩展的控件对象)
name : 保存时列对应的属性名（可设置在首行 td|th 的data-name中，自动获取）
getVal : 进入编辑状态时，控件获取值的方法 （可选）
getTxt : 退出编辑状态时，控件获取显示文本的方法（可选）
ctypeArgs ： 创建控件时传递的参数（可选），可以为数组 [a,b] ,数组代表控件构造函数的多个参数， control(ev,a,b)
参数 option 类型为 String 时：
option 值为 ：
- destroy - 销毁插件
- 待更新
$(".tab_list").tableEditor("destroy");
方法 $.tableEditor.setDefault（配置默认属性）：
$.tableEditor.setDefault(option)
参数 option Object：
新的默认选项设置
$.tableEditor.setDefault({ isAutoSaveChange:false, ctypeControls:{ "text":customTextControl, "fileupload":customFileUploadControl } })
创建自定义的编辑控件
//自定义扩展 复形单选及多选控件 //构造函数，默认传递首参数 { ui: 控件所在td , name:控件对应属性名, val:列文本或调用option.columns[n].getVal方法计算后的值 } 及ctypeArgs定义参数 function richSelectControl(ev, option) { this.$container = ev.ui; var txt = ev.val; var value = this.searchCode(option.data, txt); this.$input = $("<input name="" + ev.name + "" value="" + value + "" type="hidden"/>"); this.option = option; } //呈现时调用，呈现控件 (必须实现) richSelectControl.prototype.render = function () { this.$container.append(this.$input); this.$input.RichTreeSelect(this.option); } //退出编辑时调用，获取显示文本 (必须实现) richSelectControl.prototype.getTxt = function () { var rc = this.$input.RichTreeSelect("pointer"); return rc.getValueTxt(); } //保存编辑时调用 ，获取控件值 (必须实现) richSelectControl.prototype.getVal = function () { return this.$input.val(); } //进入编辑时调用，获取触发焦点 (必须实现) richSelectControl.prototype.focus = function () { this.$input.focus(); } //退出编辑时调用，销毁对象 (必须实现) richSelectControl.prototype.destroy = function () { var rc = this.$input.RichTreeSelect("pointer"); rc.destroy(); } //递归由文本反查值 richSelectControl.prototype.searchCode = function (list, txt) { var val = ""; $.each(list, function () { if (this.title == txt) { val = this.data.Code; return; } else if (this.list instanceof Array) { val += searchCode(this.list, txt); } }); return val; }
本页代码:
//自定义扩展 复形单选及多选控件 //构造函数，默认传递首参数 { ui: 控件所在td , name:控件对应属性名, val:列文本或调用option.columns[n].getVal方法计算后的值 } 及ctypeArgs定义参数 function richSelectControl(ev, option) { this.$container = ev.ui; var txt = ev.val; var value = this.txtToVal(txt); this.$input = $("<input name="" + ev.name + "" value="" + value + "" type="hidden"/>"); this.option = option; } //呈现时调用，呈现控件 richSelectControl.prototype.render = function () { this.$container.append(this.$input); this.$input.RichTreeSelect(this.option); } //退出编辑时调用，获取显示文本 richSelectControl.prototype.getTxt = function () { var rc = this.$input.RichTreeSelect("pointer"); return rc.getValueTxt(); } //保存编辑时调用 ，获取控件值 richSelectControl.prototype.getVal = function () { return this.$input.val(); } //进入编辑时调用，获取触发焦点 richSelectControl.prototype.focus = function () { this.$input.focus(); } //退出编辑时调用，销毁对象 richSelectControl.prototype.destroy = function () { var rc = this.$input.RichTreeSelect("pointer"); rc.destroy(); } //递归由文本反查值 richSelectControl.prototype.searchCode = function (list, txt) { var val = ""; var self = this; $.each(list, function () { if (this.title == txt) { val = this.data.Code; return; } else if (this.list instanceof Array) { val += self.searchCode(this.list, txt); } }); return val; } richSelectControl.prototype.txtToVal = function (txt) { var txt = $.trim(txt); var val = ""; var self = this; if (txt != "") { var arr = txt.split(","); $.each(arr, function (i, n) { var code = self.searchCode(listdata, this); if (code != "") { val += code + ","; } }); if (val.length > 0) { val = val.substring(0, val.length - 1); } } return val; } //配置默认属性 $.tableEditor.setDefault({ isAutoSaveChange: false, ctypeControls: { "richselect": richSelectControl } }); var option = { columns: [ { ctype: "text" }, { ctype: "datepicker" }, { ctype: "richselect", getVal: function ($td) { return $td.text(); }, getTxt: function ($td) { return $td.getEditorCtl().getTxt(); }, ctypeArgs: { valueMember: "Code", selectType: 0, data: listdata, expandLevel: "end" } }, { ctype: "richselect", ctypeArgs: { valueMember: "Code", selectType: 1, data: listdata, expandLevel: "end" } }, { ctype: "textarea", ctypeArgs: { css: { width: 50 } } } ] } $("#loadPlugin").click(function () { $(".tab_list").tableEditor(option); }); $("#unloadPlugin").click(function () { $(".tab_list").tableEditor("destroy"); });
