项目中开发到一半,需要实现表格行内编辑的功能,所以开发了这样一个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
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");
});