jQuery插件

项目中开发到一半，需要实现表格行内编辑的功能，所以开发了这样一个jQuery的插件，目标是插件不变动已有的表格结构，完全实现插件化，随时安装及卸载。目前1.0还未能实现数据提交到后台保存，待1.1版本更新。

效果图

展示Demo  

核心源码下载

表格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: {  50 } } }
        ]
    }

    $("#loadPlugin").click(function () {
        $(".tab_list").tableEditor(option);
    });

    $("#unloadPlugin").click(function () {
        $(".tab_list").tableEditor("destroy");
    });