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 相关文章推荐
10款非常有用的 Ajax 插件分享
Mar 14 Javascript
Jquery实现的tab效果可以指定默认显示第几页
Oct 16 Javascript
js点击文本框后才加载验证码实例代码
Oct 20 Javascript
一个用jquery写的判断div滚动条到底部的方法【推荐】
Apr 29 Javascript
JQuery的常用选择器、过滤器、方法全面介绍
May 25 Javascript
headjs实现网站并行加载但顺序执行JS
Nov 29 Javascript
bootstrap table 数据表格行内修改的实现代码
Feb 13 Javascript
通过构造函数实例化对象的方法
Jun 28 Javascript
微信小程序公用参数与公用方法用法示例
Jan 09 Javascript
JS实现网站吸顶条
Jan 08 Javascript
js实现div色块拖动录制
Jan 16 Javascript
Vue 禁用浏览器的前进后退操作
Sep 04 Javascript
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+javascript液晶时钟
2006/10/09 PHP
php下实现一个阿拉伯数字转中文数字的函数
2008/07/10 PHP
ThinkPHP模板替换与系统常量及应用实例教程
2014/08/22 PHP
腾讯CMEM的PHP扩展编译安装方法
2015/09/25 PHP
PHP微信模板消息操作示例
2017/06/29 PHP
PHP中常用的三种设计模式详解【单例模式、工厂模式、观察者模式】
2019/06/14 PHP
JavaScript语句可以不以;结尾的烦恼
2007/03/08 Javascript
script标签的 charset 属性使用说明
2010/12/04 Javascript
js中精确计算加法和减法示例
2014/03/28 Javascript
js中跨域方法原理详解
2015/07/19 Javascript
javascript学习总结之js使用技巧
2015/09/02 Javascript
js自定义弹框插件的封装
2020/08/24 Javascript
浅谈NodeJs之数据库异常处理
2017/10/25 NodeJs
Bootstrap3.3.7导航栏下拉菜单鼠标滑过展开效果
2017/10/31 Javascript
基于JavaScript 性能优化技巧心得(分享)
2017/12/11 Javascript
Node.js readline 逐行读取、写入文件内容的示例
2018/03/01 Javascript
vue插件实现v-model功能
2018/09/10 Javascript
微信小程序自定义底部导航带跳转功能
2018/11/27 Javascript
点击按钮弹出模态框的一系列操作代码实例
2019/03/29 Javascript
浅析vue cli3 封装Svgicon组件正确姿势(推荐)
2020/04/27 Javascript
Vue + Scss 动态切换主题颜色实现换肤的示例代码
2020/04/27 Javascript
基于js实现判断浏览器类型代码实例
2020/07/17 Javascript
用Javascript实现发送短信验证码间隔功能
2021/02/08 Javascript
[02:08]2014DOTA2国际邀请赛 430专访:力争取得小组前二
2014/07/11 DOTA
pygame游戏之旅 计算游戏中躲过的障碍数量
2018/11/20 Python
vue常用指令代码实例总结
2020/03/16 Python
利用Python批量识别电子账单数据的方法
2021/02/08 Python
canvas进阶之如何画出平滑的曲线
2018/10/15 HTML / CSS
香港家用健身器材、运动器材及健康美容仪器专门店:FitBoxx
2019/12/05 全球购物
高一政治教学反思
2014/01/28 职场文书
幼儿教师师德演讲稿
2014/05/06 职场文书
计算机多媒体专业自荐信
2014/07/04 职场文书
逃课检讨书怎么写
2015/01/01 职场文书
商超业务员岗位职责
2015/02/13 职场文书
担保书格式范文
2015/09/22 职场文书
Valheim服务器 Mod修改安装教程 【ValheimPlus】
2022/12/24 Servers