bootstrap table实现单击单元格可编辑功能


Posted in Javascript onMarch 28, 2017

要使bootstrap-table实现可编辑,需要配合使用x-editable插件。

先在页面上导入必要的css和js文件

<!DOCTYPE html>
<html lang="zh-CN">
<head>
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
 <title>bootstrap-table demo</title>
 <!-- Bootstrap 3.3.6 -->
 <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" rel="external nofollow" >
 <!-- Bootstrap table -->
 <link rel="stylesheet" href="bootstrap-table-1.11.0/bootstrap-table.css" rel="external nofollow" >
 <!-- x-editable -->
 <link rel="stylesheet" href="x-editable/bootstrap3-editable/css/bootstrap-editable.css" rel="external nofollow" >
</head>
<body>
 <div class="container">
 <p></p>
 <table id="table" class="table table-bordered table-hover">
 </table>
 </div>
 <!-- jQuery 2.2.0 -->
 <script src="jQuery-2.2.0.min.js"></script>
 <!-- Bootstrap 3.3.6 -->
 <script src="bootstrap/js/bootstrap.min.js"></script>
 <!-- bootstrap table -->
 <script src="bootstrap-table-1.11.0/bootstrap-table.js"></script>
 <script src="bootstrap-table-1.11.0/extensions/editable/bootstrap-table-editable.js"></script>
 <script src="x-editable/bootstrap3-editable/js/bootstrap-editable.js"></script>
 <script src="bootstrap-table-1.11.0/locale/bootstrap-table-zh-CN.min.js"></script>
 <script type="text/javascript">
 $(function(){
  $('#table').bootstrapTable({
   url:'data.json',
   columns:[
    {field: 'id',title: 'ID'},
    {field: 'name',title: '名称'},
    {field: 'price',title: '单价'},
    {field: 'number',title: '数量', sortable:true,
     cellStyle:function(value,row,index) {
      return {
       "css":{
        padding:'0px'
       }
      };
     },
     formatter:function(value,row,index){
      if(value == undefined) return "0";
      else return value;
     },
     editable:{
      type:'text',
      clear:false,
      validate:function(value){
       if(isNaN(value)) return {newValue:0, msg:'只允许输入数字'};
       else if(value<0) return {newValue:0, msg:'数量不能小于0'};
       else if(value>=1000000) return {newValue:0, msg:'当前最大只能输入999999'};
      },
      display:function(value){
       $(this).text(Number(value));
      },
      //onblur:'ignore',
      showbuttons:false,
      defaultValue:0,
      mode:'inline'
     }
    },
    {field:'amount', title: '总价'}
   ],
   //height:300,
   idField:'id',
   onEditableHidden: function(field, row, $el, reason) { // 当编辑状态被隐藏时触发
    if(reason === 'save') {
     var $td = $el.closest('tr').children();
     $td.eq(-1).html((row.price*row.number).toFixed(2));
     $el.closest('tr').next().find('.editable').editable('show'); //编辑状态向下一行移动
    } else if(reason === 'nochange') {
     $el.closest('tr').next().find('.editable').editable('show');
    }
   }
  });
  $('#table').on( 'click', 'td:has(.editable)', function (e) {
   //e.preventDefault();
   e.stopPropagation(); // 阻止事件的冒泡行为
   $(this).find('.editable').editable('show'); // 打开被点击单元格的编辑状态
  } );

 });
 </script>

</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
动态控制Table的js代码
Mar 07 Javascript
Javascript 网页水印(非图片水印)实现代码
Mar 01 Javascript
javascript拓展DOM操作 prependChild insertAfert
Nov 17 Javascript
mailto的使用技巧分享
Dec 21 Javascript
javascript实现列表滚动的方法
Jul 30 Javascript
bootstrap侧边栏圆点导航
Jan 11 Javascript
jQuery插件HighCharts实现的2D条状图效果示例【附demo源码下载】
Mar 15 Javascript
基于node.js制作简单爬虫教程
Jun 29 Javascript
vue语法之拼接字符串的示例代码
Oct 25 Javascript
JavaScript引用类型Object常见用法实例分析
Aug 08 Javascript
JS实现电脑虚拟键盘的操作
Jun 24 Javascript
vue2的 router在使用过程中遇到的一些问题
Apr 13 Vue.js
Web前端框架Angular4.0.0 正式版发布
Mar 28 #Javascript
JavaScript实现经纬度转换成地址功能
Mar 28 #Javascript
js实现多行文本框统计剩余字数功能
Mar 28 #Javascript
js实现下拉框效果(select)
Mar 28 #Javascript
vue2.0获取自定义属性的值
Mar 28 #Javascript
详解从Node.js的child_process模块来学习父子进程之间的通信
Mar 27 #Javascript
利用NPM淘宝的node.js镜像加速nvm
Mar 27 #Javascript
You might like
php生成随机字符串可指定纯数字、纯字母或者混合的
2014/04/18 PHP
PHP开发之用微信远程遥控服务器
2018/01/25 PHP
Laravel5.7框架安装与使用学习笔记图文详解
2019/04/02 PHP
聊聊 PHP 8 新特性 Attributes
2020/08/19 PHP
js实现双向链表互联网机顶盒实战应用实现
2011/10/28 Javascript
JavaScript栏目列表隐藏/显示简单实现
2013/04/03 Javascript
浅谈JavaScript之事件绑定
2013/07/08 Javascript
JavaScript实现的使用键盘控制人物走动实例
2014/08/27 Javascript
node.js中使用socket.io的方法
2014/12/15 Javascript
js中键盘事件实例简析
2015/01/10 Javascript
jQuery中next方法用法实例
2015/04/24 Javascript
快速学习jQuery插件 Form表单插件使用方法
2015/12/01 Javascript
jQuery侧边栏实现代码
2016/05/06 Javascript
深入浅出 jQuery中的事件机制
2016/08/23 Javascript
微信小程序 tabs选项卡效果的实现
2017/01/05 Javascript
jQuery+CSS3实现点赞功能
2017/03/13 Javascript
react-router JS 控制路由跳转实例
2017/06/15 Javascript
微信JS SDK接入的几点注意事项(必看篇)
2017/06/23 Javascript
Angular4学习教程之HTML属性绑定的方法
2018/01/04 Javascript
vue实现form表单与table表格的数据关联功能示例
2019/01/29 Javascript
基于ajax实现上传图片代码示例解析
2020/12/03 Javascript
编写Python的web框架中的Model的教程
2015/04/29 Python
Python函数式编程指南(三):迭代器详解
2015/06/24 Python
django rest framework 数据的查找、过滤、排序的示例
2018/06/25 Python
python实现Zabbix-API监控
2018/09/17 Python
python+selenium 定位到元素,无法点击的解决方法
2019/01/30 Python
python字符串判断密码强弱
2020/03/18 Python
Django import export实现数据库导入导出方式
2020/04/03 Python
python 视频下载神器(you-get)的具体使用
2021/01/06 Python
2014幼儿园教师师德师风演讲稿
2014/09/10 职场文书
大学生职业生涯规划大赛作品(精品)
2014/09/17 职场文书
党支部遵守党的政治纪律情况对照检查材料
2014/09/26 职场文书
2014年防汛工作总结
2014/12/08 职场文书
农村党员干部承诺书
2015/05/04 职场文书
MybatisPlus EntityWrapper如何自定义SQL
2022/03/22 Java/Android
Android RecyclerView实现九宫格效果
2022/06/28 Java/Android