項目背景

剛加入公司的新項目，主要在做開發工作。由於是新手，本週的工作是配合另外一個同事寫前臺頁面。前臺框架是Bootstrap，本文主要介紹一下項目需求的一個功能——表格行內編輯事件。

使用X-editable插件實現的。

效果圖：點擊表格就會出現下拉框。

步驟

1、jsp中添加引用

<link type="text/css" href="${ctx}/static/comp/jquery-ui-bootstrap/css/bootstrap-editable.css" rel="stylesheet">
<script src="${ctx}/static/comp/jquery-ui-bootstrap/js/bootstrap-editable.js" type="text/javascript"></script>

2、在jsp中編寫代碼

1）表格數據如下：

    <c:forEach items="${page.result}" var="m" varStatus="status">
        <tr>
            <td columnName="operator">
                <a href="#" class="employee" value=""data-pk="operator"
                   data-type="select2">${m.employeeNo}
                </a>
            </td>
        </tr>
    </c:forEach>

2）編寫X-editable代碼

/**
         * table行內編輯事件，化驗員單元格編輯事件
         */
        $('.employee').editable({  //employee標籤

            type: "select2",   //編輯框的類型--多選框
            disabled: false,       //是否禁用編輯
            emptytext: "__",       //空值的默認文本
            mode: "inline",        //編輯框的模式：支持popup和inline兩種模式，默認是popup
            showbuttons:false,
            validate: function (value) { //字段驗證
               
                if (!$.trim(value)) {
                    return '不能爲空';
                }
            },
            select2: {
                multiple: true,//多選
                placeholder: '請選擇化驗員',
                width: '100px',
            },
            source:          //下拉框數據源--後臺獲取list數據
                function () {
                    var result1 = [];
                    <c:forEach items="${employeeList}" var="s">   //employeeList後臺返回數據
                    result1.push({value: "${s.Id}", text: "${s.employeeNo}"});
                    </c:forEach>
                    return result1;
                },
        });

官網學習地址：http://vitalets.github.io/x-editable/ 該插件支持主流的前端框架，很使用。

項目參考地址：JS組件系列——BootstrapTable 行內編輯解決方案：x-editable