项目背景

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

    LeetCode题解: LRU Cache 缓存设计 2014年12月10日 08:54:16 邴越 阅读数 1101更多 分类专栏: LeetCode   版权声明:本文为博主原创文章,遵循CC 4 ...

  2. 分布式---Raft算法

    6.Raft   Raft也是分布式一致性协议,主要是用来竞选主节点. 单个Candidate的竞选   有三种节点:Follower,Candidate和Leader.Leader会周期性的发送心跳 ...

  3. sql server select和set赋值的区别

    --SQL Server中对已经定义的变量赋值的方式用两种,分别是 SET 和 SELECT --当表达式返回一个值并对一个变量进行赋值时,推荐使用 SET 方法 (1)SELECT可以在一条语句里对 ...

  4. CPU如何区分溢出和自然进位?

    CPU如何区分溢出和自然进位? 之前学习补码的时候倒是学会了基本概念,但是最近又接触时发现还有不清楚的地方,所以又研究了下 今天的核心问题的"CPU是如何区分高位自然舍弃和溢出的?" ...

  5. node-images Windows 64-bit with Unsupported runtime 错误解决办法 及 node 历史版本下载

    在做项目的时候下载的最新的10.16[2019.6.12]版本,出现了模块不兼容的问题[node-images]. 在git上发现了相同问题 https://github.com/zhangyuanw ...

  6. chrome79开发者工具代码高亮失效的解决办法

    升级chrome最新版本后,存在开发者工具Sources内代码高亮失效的情况 解决办法: 1. 开发者工具面板右上角菜单->Setting->Preferences 2. 将Theme切换 ...

  7. deep_learning_Function_rnn_cell.BasicLSTMCell

    tf.nn.rnn_cell.BasicLSTMCell(n_hidden, forget_bias=1.0, state_is_tuple=True): n_hidden表示神经元的个数,forge ...

  8. dumpe2fs Linux支持的文件系统

    dumpe2fs  (-bh)装置文件名 选项与参数: -b : 列出保留为坏轨的部分 -h : 仅列出superblock的数据,不会列出其他的区段内容 查看Linux支持的文件系统哪些支持: ls ...

  9. php多个数组组合算法 火车头免登录发布接口代码备忘

    火车头发布产品的时候,有颜色.尺码.性别等等产品属性,需要进行不重复的组合,变成不重复的数组 <?php function comb($a){ $a = array_filter($a); $o ...

  10. windows调试之命令行窗口问题

    CProProcess::InitProProcess(_T("safeProcessDemo")); cout << "Enter 'q' to exit: ...