bootstrap editable 行内编辑
除了那些bootstrap/bootstrap table的js , css之外,要额外添加editable的文件:
- <link href="../assets/css/bootstrap-editable/bootstrap-editable.css" rel="stylesheet">
- <script src="../assets/js/bootstrap-editable/bootstrap-editable.js"></script>
- <script src="../assets/js/bootstrap-editable/bootstrap-table-editable.js"></script>
然后写js
- $('#tableId').bootstrapTable({
- data:data['data'],
- pagination: true,
- locale:"zh-US",
- pageSize: 5,
- singleSelect: false,
- clickToSelect: true,//一定要写!!可以选择:用于edittable
- sidePagination: "client",
- columns: [
- {
- title: '姓名',
- field: 'name',
- align: 'center',
- valign: 'middle'
- },{
- title: '年龄',
- field: 'age',
- align: 'center',
- valign: 'middle',
- editable: {
- type: 'text',
- title: '年龄',
- validate: function (v) {
- if (!v) return '不能为空';
- }
- }
- },{
- title: '操作',
- field: 'id',
- align: 'center',
- valign: 'middle',
- formatter:function (value, data, index) {
- var d = '<button type="button" class="btn btn-danger" οnclick="del(\'' + data.id + '\')" >删除</button>';
- return d;
- }
- }
- ],
- onEditableSave: function (field, row, oldValue, $el) {//提交行内编辑数据
- debugger;
- console.info(row);
- $.ajax({
- type: "post",
- url: "/test/edit",
- /*data: row,*/
- data:{ "name": row.name,"age":row.age},
- dataType: 'JSON',
- success: function (data, status) {
- if (status == "success") {
- alert('成功');
- }
- },
- error: function () {
- alert('失败');
- },
- });
- }
- });
bootstrap editable 行内编辑的更多相关文章
- BootStrap行内编辑
Bootstrap行内编辑,这里下载了一个X-Editable的插件,在Nuget里面就可以搜到. 引用的js和css大致如下: @*.Jquery组件引用*@ <script src=&quo ...
- JS组件系列——BootstrapTable 行内编辑解决方案:x-editable
前言:之前介绍bootstrapTable组件的时候有提到它的行内编辑功能,只不过为了展示功能,将此一笔带过了,罪过罪过!最近项目里面还是打算将行内编辑用起来,于是再次研究了下x-editable组件 ...
- [转]JS组件系列——BootstrapTable 行内编辑解决方案:x-editable
本文转自:http://www.cnblogs.com/landeanfen/p/5821192.html 阅读目录 一.x-editable组件介绍 二.bootstrapTable行内编辑初始方案 ...
- js插件---JS表格组件BootstrapTable行内编辑解决方案x-editable
js插件---JS表格组件BootstrapTable行内编辑解决方案x-editable 一.总结 一句话总结:bootstrap能够做为最火的框架,绝对不仅仅只有我看到的位置,它应该还有很多位置可 ...
- Django项目:CRM(客户关系管理系统)--69--59PerfectCRM实现king_admin行内编辑
#base_admin.py # ————————24PerfectCRM实现King_admin自定义操作数据———————— from django.shortcuts import render ...
- jQuery EasyUI 数据网格 - 启用行内编辑(转自http://www.runoob.com/jeasyui/jeasyui-datagrid-datagrid12.html)
可编辑的功能是最近添加到数据网格(datagrid)的.它可以使用户添加一个新行到数据网格(datagrid).用户也可以更新一个或多个行.本教程向您展示如何创建一个数据网格(datagrid)和内联 ...
- Dynamics 365新功能:可编辑的网格(行内编辑)
关注本人微信和易信公众号: 微软动态CRM专家罗勇 ,回复238或者20161127可方便获取本文,同时可以在第一间得到我发布的最新的博文信息,follow me!我的网站是 www.luoyong. ...
- bootstrap-editable实现bootstrap-table行内编辑
bootstrap-editable行内编辑效果如下: 需要引入插件 列初始化代码,为可编辑的列添加editable属性: columns = [ { title: '文件名', field: 'Na ...
- 雷林鹏分享:jQuery EasyUI 数据网格 - 启用行内编辑
jQuery EasyUI 数据网格 - 启用行内编辑 可编辑的功能是最近添加到数据网格(datagrid)的.它可以使用户添加一个新行到数据网格(datagrid).用户也可以更新一个或多个行. 本 ...
随机推荐
- Java实现龟兔赛跑
闲极无聊,加上翻手机看到龟兔赛跑的词语,想到了可以通过java起两个线程来实现龟兔赛跑的实现. 代码实现其实很简单: 首先是乌龟类: 然后是兔子类: 最后是赛跑类: 接下里让我们看一下输出结果吧: 乌 ...
- GPIB、USB、PCI、PCI Express和以太网/LAN/LXI
GPIB 我们研究的第一个总线是IEEE 488总线,较为熟悉的称谓是GPIB(通用接口总线).GPIB是一种在业界已经得到证明的专为仪器控制应用设计的总线.GPIB在过去30年来一直是鲁棒的.可靠的 ...
- C++中的类型识别
1,为什么会提出类型识别概念呢? 1,为什么在 C 语言中没有提出这个概念呢,就是因为在 C++ 中引入了面向对象的特性,面向对象里面有一个非常重要的原则就是赋值兼容性原则: 2,在面向对象中可能出现 ...
- 基于OneAPM的Web系统性能监测
1.在官网:http://www.oneapm.com/注册试用账号 2.选择AI,添加应用,下载安装本地探针程序(Agent) 3.在Tomcat中部署Web系统,并重启,然后在浏览器访问应用,稍等 ...
- Longest Subsequence CodeForces - 632D (lcm)
大意: 给定序列$a$, 求选出最长的一个子序列, 使得lcm不超过m. 刚开始想复杂了, 想着枚举gcd然后背包, 这样复杂度就是$O(\sum\limits_{i=1}^m \frac{m\sig ...
- appium+python自动化项目实战(二):项目工程结构
废话不多说,直接上图: nose.cfg配置文件里,可以指定执行的测试用例.生成测试报告等.以后将详细介绍.
- fullpage实现(-)
在线demo还没弄好,地址先给出来
- 微信小程序自定义字体及自定义图标问题说明
自定义图标及自定义字体,一直是很多小程序开发者的心病,其实本站是很多解决方案的,为了集中起来,方便直接跳过此坑,我特别做了这次针对字体及字体图标的跳坑: 相关文章:微信小程序添加并使用外部字体(成功添 ...
- 6U VPX 加固智能计算异构服务器
6U VPX 加固智能计算异构服务器 北京太速科技有限公司在线客服:QQ:448468544 公司网站:www.orihard.com联系电话:15084122580
- mongoose 开源http库
Mongoose是一个用C编写的网络库.它为客户端和服务器模式实现TCP,UDP,HTTP,WebSocket,CoAP,MQTT的事件驱动的非阻塞API. 设计理念: Mongoose有三个基本的数 ...