项目背景

刚加入公司的新项目,主要在做开发工作。由于是新手,本周的工作是配合另外一个同事写前台页面。前台框架是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

总结

在网上总能找到一些实用的插件,节省了我们开发的成本,提高了开发效率。小编也是第一周使用这个插件,请大家多多指导!

BootStrap之X-editable插件使用的更多相关文章

  1. 基于jquery的bootstrap在线文本编辑器插件Summernote

    Summernote是一个基于jquery的bootstrap超级简单WYSIWYG在线编辑器.Summernote非常的轻量级,大小只有30KB,支持Safari,Chrome,Firefox.Op ...

  2. Jquery的bootstrap在线文本编辑器插件Summernote

    http://www.jqcool.net/demo/201407/bootstrap-summernote/ Summernote是一个基于jquery的bootstrap超级简单WYSIWYG在线 ...

  3. 基于Metronic的Bootstrap开发框架经验总结(5)--Bootstrap文件上传插件File Input的使用

    Bootstrap文件上传插件File Input是一个不错的文件上传控件,但是搜索使用到的案例不多,使用的时候,也是一步一个脚印一样摸着石头过河,这个控件在界面呈现上,叫我之前使用过的Uploadi ...

  4. Bootstrap <基础三十一>插件概览

    在前面布局组件中所讨论到的组件仅仅是个开始.Bootstrap 自带 12 种 jQuery 插件,扩展了功能,可以给站点添加更多的互动.即使不是一名高级的 JavaScript 开发人员,也可以着手 ...

  5. Bootstrap文件上传插件File Input的使用

    基于Metronic的Bootstrap开发框架经验总结(5)--Bootstrap文件上传插件File Input的使用 Bootstrap文件上传插件File Input是一个不错的文件上传控件, ...

  6. bootstrap风格的multiselect插件——类似邮箱收件人样式

    在开发颗粒云邮箱的过程中,遇到了一个前端的问题,就是邮箱收件人的那个multiselect的input输入框.不仅能够多选,还要能够支持ajax搜索,把联系人搜索出来.就是类似下面的这个东西: 网上找 ...

  7. bootstrap学习以及其插件

    Bootstrap中文网地址,里面有bootstrap组件的下载与使用说明,现在使用bootstrap3: http://www.bootcss.com/ W3CSchool.CC里面有学习boots ...

  8. 【转】bootstrap 的 affix.js 插件

    我觉得 Twitter Bootstrap 提供的 JavaScript 插件可用性非常高,但文档多数简单.按部就班操作了,有效果当然好,没效果的话简直不知道为什么.之前我写过 Scrollspy 用 ...

  9. 基于bootstrap的上传插件fileinput实现ajax异步上传功能(支持多文件上传预览拖拽)

    首先需要导入一些js和css文件 ? 1 2 3 4 5 6 <link href="__PUBLIC__/CSS/bootstrap.css" rel="exte ...

  10. 基于 Vue BootStrap的迷你Chrome插件

    代码地址如下:http://www.demodashi.com/demo/14306.html 安装 安装 Visual Studio Code 和Chrome, 自行FQ 详细安装这里略过 安装包管 ...

随机推荐

  1. API 网关性能比较:NGINX vs. ZUUL vs. Spring Cloud Gateway vs. Linkerd

    前几天拜读了 OpsGenie 公司(一家致力于 Dev & Ops 的公司)的资深工程师 Turgay Çelik 博士写的一篇文章(链接在文末),文中介绍了他们最初也是采用 Nginx 作 ...

  2. sql--index 索引

    CREATE INDEX 语句用于在表中创建索引. 在不读取整个表的情况下,索引使数据库应用程序可以更快地查找数据. 索引 您可以在表中创建索引,以便更加快速高效地查询数据. 用户无法看到索引,它们只 ...

  3. Tomcat 设置80端口

    1:修改tomcat配置 vi /usr/local/tomcat/conf/server.xml 找到 Connector port="8080" protocol=" ...

  4. ELK电子书籍

    Elasticsearch in Action(英文版).pdfElasticsearch实战 in action(中文版).pdfElasticsearch技术解析与实战.pdfElasticsea ...

  5. O005、远程管理 KVM 虚机

    参考https://www.cnblogs.com/CloudMan6/p/5256018.html   上一节我们通过 virt-manager 在本地主机上创建并管理 KVM 虚机,其实 virt ...

  6. debezium关于cdc的使用(上)

    博文原址:debezium关于cdc的使用(上) 简介 debezium是一个为了捕获数据变更(cdc)的开源的分布式平台.启动并指向数据库,当其他应用对此数据库执行inserts.updates.d ...

  7. 关于redis的几件小事(九)redis的并发竞争问题

    1.什么是并发竞争 就是多客户端同时并发写一个key,可能本来应该先到的数据后到了,导致数据版本错了.或者是多客户端同时获取一个key,修改值之后再写回去,只要顺序错了,数据就错了. 2.怎么解决 采 ...

  8. golang日志框架--logrus学习笔记

    golang日志框架--logrus学习笔记 golang标准库的日志框架非常简单,仅仅提供了print,panic和fatal三个函数,对于更精细的日志级别.日志文件分割以及日志分发等方面并没有提供 ...

  9. JS常用函数原理的实现

    本文针对目前常见的面试题,实现了相应方法的核心原理,部分边界细节未处理.后续也会持续更新,希望对你有所帮助. 1.实现一个call函数 // 思路:将要改变this指向的方法挂到目标this上执行并返 ...

  10. 31C3 CTF web关writeup

    0x00 背景 31c3 CTF 还是很人性化的,比赛结束了之后还可以玩.看题解做出了当时不会做的题目,写了一个writeup. 英文的题解可以看这:https://github.com/ctfs/w ...