jQuery插件 - tableEditor 1.0,表格行內編輯

項目中開發到一半，需要實現表格行內編輯的功能，所以開發了這樣一個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: { width: 50 } } }
        ]
    }

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

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