BootStrap之X-editable插件使用

項目背景

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

    使用X-editable插件實現的。

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

 

 

步驟

1、jsp中添加引用

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

2、在jsp中編寫代碼

     1）表格數據如下：

1. <c:forEach items= "${page.result}" var="m" varStatus="status">
2. <tr>
3. <td columnName="operator">
4. <a href="#" class="employee" value=""data-pk="operator"
5. data-type="select2">${m.employeeNo}
6. </a>
7. </td>
8. </tr>
9. < /c:forEach>

    2）編寫X-editable代碼

1. /**
2. * table行內編輯事件，化驗員單元格編輯事件
3. */
4. $( '.employee').editable({ //employee標簽
5.  
6. type: "select2", //編輯框的類型--多選框
7. disabled: false, //是否禁用編輯
8. emptytext: "__", //空值的默認文本
9. mode: "inline", //編輯框的模式：支持popup和inline兩種模式，默認是popup
10. showbuttons: false,
11. validate: function (value) { //字段驗證
12.  
13. if (!$.trim(value)) {
14. return '不能為空';
15. }
16. },
17. select2: {
18. multiple: true,//多選
19. placeholder: '請選擇化驗員',
20. width: '100px',
21. },
22. source: //下拉框數據源--后台獲取list數據
23. function () {
24. var result1 = [];
25. <c: forEach items="${employeeList}" var="s"> //employeeList后台返回數據
26. result1.push({value: "${s.Id}", text: "${s.employeeNo}"});
27. </c: forEach>
28. return result1;
29. },
30. });

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

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

總結

    在網上總能找到一些實用的插件，節省了我們開發的成本，提高了開發效率。小編也是第一周使用這個插件，請大家多多指導！