BootStrap之X-editable插件使⽤
项⽬背景
刚加⼊公司的新项⽬，主要在做开发⼯作。由于是新⼿，本周的⼯作是配合另外⼀个同事写前台页⾯。前台框架是Bootstrap，本⽂主要介绍⼀下项⽬需求的⼀个功能——表格⾏内编辑事件。
使⽤X-editable插件实现的。
效果图：点击表格就会出现下拉框。
步骤bootstrap项目
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="${sult}" 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. });
项⽬参考地址：
总结
在⽹上总能到⼀些实⽤的插件，节省了我们开发的成本，提⾼了开发效率。⼩编也是第⼀周使⽤这个插件，请⼤家多多指导！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。