bootstraptable教程+x-editable

2023年6月21日发(作者：)

bootstraptable教程+x-editableBootstrap-table快速⼊门---- bootstrap-table是⼀个基于Bootstrap的jQuery插件可以实现从数据库中提取数据到前端进⾏相应操作的功能

更加优秀的页⾯展现请到Table of contentsquick-start对本⽂有什么疑问或者建议,可以在下⽅的评论区说明,笔者会尽能⼒给出解答,另外已经完成了bootstrap-table的增删改查操作,以及增加操作的的模态框(bootstrap modal),以及表单校检(bootstrap-validate),最近有点忙,过⼀段时间更新,还有侧边栏的动态⽣成(bootstrap-treeview)也是在学习当中快速使⽤:Clone the repo:

git clone /seltonGitHub/没有配置java环境,移步;没有配置tomcat环境,移步;没有下载配置idea环境,移步;why-use学习成本低,配置简单,⽂档齐全与Bootstrap⽆缝衔接,整体风格⼀致,也便于⼆次开发开发者活跃,Github定期维护whats-includedfile list:bootstrapDemo/├── web/│ ├── js│ ├── WEB-INF│ └── └── src/│ └── 表单展⽰页⾯ ()javascript⽂件 ()从服务器取得数据,然后渲染表格details$("#table").bootstrapTable({ method: "post", url: "获取后台数据的url", ... ...});

这⾥的js语句的所有渲染操作是针对html页⾯中的id为table的⼀个table,所以不要忘了在导⼊了该js的html中构建出id为table的tablebootstrap-table中的重要键值的简单解释:会向服务器发起ajax访问bootstrapTable构建元素解析:url$("#table").bootstrapTable({ method: "post", url: "获取后台数据的url", ... ...});

ajax访问到的后台路径(必须),该后台需要按照指定的 格式返回数据methodget发送的数据在请求报⽂的请求⾏,也就是url部分,⽽且参数如果有中⽂会出现乱码问题,⽽post发送的数据在报⽂实体,都应该是post,表单的提交也⼀般都是postqueryParams不需要任何修改,相当于ajax中的data键,上⾯的method决定这些参数传递给后台的的传递⽅式.发送给后台的数据,给出实现表单分页的两个参数,和,在arams中给出,后台⽤ameter()的⽅式拿到queryParams中传递过来的值,然后制定daopageSize当前table⼀次最多显⽰多少⾏,也就是你的table的⼀页应该展现多少⾏,必须pageNumber起始页,⼀般是1不⽤改,这个和pageSize决定了queryParams中的offset的值,offset=(pageNow - 1) * pageSize,limit=pageSizecontentTypecontentType: "application/x-www-form-urlencoded"columns$("#table").bootstrapTable({ method: "post", url: "获取后台数据的url", data: [ {field: 'testId', title: 'ID'}, {field: 'testName', title: '姓名'}, {field: 'testPassword', title: '密码'} ]

... ... ]});

你的table的表结构,以上例⼦表⽰表有三列,列的实际显⽰名字分别是ID,姓名,密码,但是field代表实际数据的名字,表中的数据是由于ajax向服务器发起访问,服务器返回给的数据中的rows的每⼀个json对象的键都会对应到field的列中-----jsonstyle{

"total":25,

"rows":[ { "testID":1, "testName":"xiaoming1", "testPassword":"xiaomingpwd1" }, { "testID":2, "testName":"xiaoming2", "testPassword":"xiaomingpwd2" } ]}

数据库返还给发起访问的ajax的数据,必须满⾜,包含两个json形式的键值对,⼀个是total键,值为表单拥有者在数据库中的全部数据的数量(⾏数),这个数据和pageSize决定table展⽰的页⾯有多少页,另⼀个是rows键,值为多个json对象,rows的每⼀个json对象就是当前table页的⼀⾏实体展⽰,这⾥的rows相当于会给前端table两⾏数据,testID,testName,testPassword分别会被填⼊到table中的field对应的列中-----arams = function (params) { var temp = { //这⾥的键的名字和控制器的变量名必须⼀直，这边改动，控制器也需要改成⼀样的 limit: , //, 页⾯⼤⼩ offset: , testNum: 445, testNum1: 343 };

offset=( - 1) * ,是会被发送到后台使⽤的数据,arams = function (params) { var temp = { //这⾥的键的名字和控制器的变量名必须⼀直，这边改动，控制器也需要改成⼀样的 limit: , //, 页⾯⼤⼩ offset: , testNum: 445, testNum1: 343 };limit=,是会被发送到后台使⽤的数据,sql⽰例SELECT * FROM test WHERE id = ? LIMIT offset,limit表格绑定事件⽤于测试ajax返回的数据是最好的$("#table").bootstrapTable({ method: "post", url: "获取后台数据的url", onLoadSuccess: function(){ //加载成功时执⾏ ("加载成功"); }, onLoadError: function(){ //加载失败时执⾏ ("加载数据失败"); }});

关于事件,更为详细的介绍请访问editable这是在操作table吗,感觉就像是数据库展现在了页⾯上如果你已经阅读完或者已经在⾃⼰代码中实现了上述功能,但是table存在的⽬的本来就不应该只是展现,应该还有寻常的CRUD,精⼒有限,只是实践了update,笔者使⽤的是⾏内编辑的⽅式实现的update,需要⽤到另⼀个⼯具X-editable,不过还好boottable有这样的插件,将x-editable封装整合到了当中,只需要引⼊/bootstrap-table/1.12.1/extensions/editable/t editable$("#table").bootstrapTable({ method: "post", url: "获取后台数据的url", [ {field: 'testId', title: 'ID', editable: {mode: 'popup'} }, {field: 'testName',

title: '姓名'}, {field: 'testPassword',

title: '密码'} ]

... ... ]});

onEditableSave: function (field, row, oldValue, $el) { $.ajax({ type: "post", url: "/ordercenter/", data: { orderid: d, updateCol: field, updateVal: eval('row.'+field) }, dataType: 'JSON', success: function (data, status) { (data); if (status == "success") { alert('旧数据: 订单号: ' + d + ' ' + field + ': ' + oldValue + 'rn' + '更新后的数据: 订单号: ' + Id + ' ' + Col + ': ' + Val) } }, error: function () { alert('编辑失败'); }, complete: function () { } });},details editable编辑后的提交⽅法统⼀放到onEditableSave事件⾥⾯统⼀处理例⼦: 页⾯table中的列姓名,field为testName,实际的值为xiaoming1,通过修改将其改为xiaoming2,这时候field为testName,row为⼀个json,键值对分别为该⾏的所有键值组合,oldValue为xiaoming1更为详细的描述请到建议读者直接使⽤我的onEditableSave,它向后台发送了三个数据精确完成update,⾏特定标识和列特定标识定位到修改了哪⼀个具体的数据,再给出updateVal指出原本的数据被修改成了updateValmoreEditableeditable中的mode的值⼀般是popup,翻译是弹出的意思,也可以使⽤inline值,但是点击并且编辑的时候会使表格样式发⽣改变,⽽popup则不会demoweb-xml / DataSendServlet ndServlet DataSendServlet /DataSendServlet html-demo

js-demovar TableInit = function () {var oTableInit = new Object();//初始化 = function () { $('#Table').bootstrapTable({ url: '/DataSendServlet', //请求后台的URL（*） method: 'get', //请求⽅式（*） async: true, //true表⽰执⾏到这,ajax向后台发起访问,在等待响应的这段时间⾥,继续执⾏下⾯的代码 //设置为true,基本都是后⾯的代码(除⾮还有ajax)先执⾏

// toolbar: '#toolbar', //⼯具按钮⽤哪个容器 striped: true, //是否显⽰⾏间隔⾊ cache: false, //是否使⽤缓存，默认为true，所以⼀般情况下需要设置⼀下这个属性（*） pagination: true, //是否显⽰分页（*） queryParams: arams,//传递参数（*） sidePagination: "server", //分页⽅式：client客户端分页，server服务端分页（*） paginationPreText:'<', //上⼀页按钮样式 paginationNextText:'>', //下⼀页按钮样式 pageNumber: 1, //初始化加载第⼀页，默认第⼀页 pageSize: 10, //每页的记录⾏数（*） pageList: [10, 25, 50, 100], //可供选择的每页的⾏数（*） contentType: "application/x-www-form-urlencoded", //重要选项,必填 showColumns: true, //是否显⽰所有的列 showRefresh: true, //是否显⽰刷新按钮 minimumCountColumns: 2, //最少允许的列数 clickToSelect: true, //是否启⽤点击选中⾏ //height: 700, //⾏⾼，如果没有设置height属性，表格⾃动根据记录条数决定表格⾼度,最好不要设置这个属性 uniqueId: "no", //每⼀⾏的唯⼀标识，⼀般为主键列 showToggle: true, //是否显⽰详细视图和列表视图的切换按钮 cardView: false, //是否显⽰详细视图 detailView: false, //是否显⽰⽗⼦表 columns: [ { field: 'testId', title: 'ID', editable: { mode: 'inline' } }, { field: 'testName', title: '⽤户名' }, { field: 'testPassword', title: '密码' } ], rowStyle: function (row, index) { var classesArr = ['success', 'info']; var strclass = ""; if (index % 2 === 0) {//偶数⾏ strclass = classesArr[0]; } else {//奇数⾏ strclass = classesArr[1]; } return {classes: strclass}; },//隔⾏变⾊ });};//得到查询的参数arams = function (params) { var temp = { //这⾥的键的名字和控制器的变量名必须⼀直，这边改动，控制器也需要改成⼀样的 limit: , //, 页⾯⼤⼩ offset: , testNum: 445, testNum1: 343 }; return temp;};return oTableInit;};server-demopackage ;import tException;import vlet;import rvlet;import rvletRequest;import rvletResponse;import ption;import ation;/** * @author seltonzyf@ * @date 2018/5/10 13:59 */@WebServlet(name = "DataSendServlet")public class DataSendServlet extends HttpServlet { @Override protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { //这⾥输出后台从ajax拿到的数据 Enumeration parameterNames = ameterNames(); while (eElements()) { String s = ement(); String parameter = ameter(s); n("s = " + s); n("parameter = " + parameter); } ter().print("{"total": 11, "rows":[{"testId":9, "testName":"selton", "testPassword": 1}]}"); } @Override protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doPost(request,response); }}注意bootstrap-table只能被调⽤⼀次的问题在inittable之前$("#table").bootstrapTable('destroy');

清空之前表内数据服务器向前端发送的⽤于构建表单的json,所有的键都会变成⼩写

2023年6月21日发(作者：)

bootstraptable教程+x-editableBootstrap-table快速⼊门---- bootstrap-table是⼀个基于Bootstrap的jQuery插件可以实现从数据库中提取数据到前端进⾏相应操作的功能

更加优秀的页⾯展现请到Table of contentsquick-start对本⽂有什么疑问或者建议,可以在下⽅的评论区说明,笔者会尽能⼒给出解答,另外已经完成了bootstrap-table的增删改查操作,以及增加操作的的模态框(bootstrap modal),以及表单校检(bootstrap-validate),最近有点忙,过⼀段时间更新,还有侧边栏的动态⽣成(bootstrap-treeview)也是在学习当中快速使⽤:Clone the repo:

git clone /seltonGitHub/没有配置java环境,移步;没有配置tomcat环境,移步;没有下载配置idea环境,移步;why-use学习成本低,配置简单,⽂档齐全与Bootstrap⽆缝衔接,整体风格⼀致,也便于⼆次开发开发者活跃,Github定期维护whats-includedfile list:bootstrapDemo/├── web/│ ├── js│ ├── WEB-INF│ └── └── src/│ └── 表单展⽰页⾯ ()javascript⽂件 ()从服务器取得数据,然后渲染表格details$("#table").bootstrapTable({ method: "post", url: "获取后台数据的url", ... ...});

这⾥的js语句的所有渲染操作是针对html页⾯中的id为table的⼀个table,所以不要忘了在导⼊了该js的html中构建出id为table的tablebootstrap-table中的重要键值的简单解释:会向服务器发起ajax访问bootstrapTable构建元素解析:url$("#table").bootstrapTable({ method: "post", url: "获取后台数据的url", ... ...});

ajax访问到的后台路径(必须),该后台需要按照指定的 格式返回数据methodget发送的数据在请求报⽂的请求⾏,也就是url部分,⽽且参数如果有中⽂会出现乱码问题,⽽post发送的数据在报⽂实体,都应该是post,表单的提交也⼀般都是postqueryParams不需要任何修改,相当于ajax中的data键,上⾯的method决定这些参数传递给后台的的传递⽅式.发送给后台的数据,给出实现表单分页的两个参数,和,在arams中给出,后台⽤ameter()的⽅式拿到queryParams中传递过来的值,然后制定daopageSize当前table⼀次最多显⽰多少⾏,也就是你的table的⼀页应该展现多少⾏,必须pageNumber起始页,⼀般是1不⽤改,这个和pageSize决定了queryParams中的offset的值,offset=(pageNow - 1) * pageSize,limit=pageSizecontentTypecontentType: "application/x-www-form-urlencoded"columns$("#table").bootstrapTable({ method: "post", url: "获取后台数据的url", data: [ {field: 'testId', title: 'ID'}, {field: 'testName', title: '姓名'}, {field: 'testPassword', title: '密码'} ]

... ... ]});

你的table的表结构,以上例⼦表⽰表有三列,列的实际显⽰名字分别是ID,姓名,密码,但是field代表实际数据的名字,表中的数据是由于ajax向服务器发起访问,服务器返回给的数据中的rows的每⼀个json对象的键都会对应到field的列中-----jsonstyle{

"total":25,

"rows":[ { "testID":1, "testName":"xiaoming1", "testPassword":"xiaomingpwd1" }, { "testID":2, "testName":"xiaoming2", "testPassword":"xiaomingpwd2" } ]}

数据库返还给发起访问的ajax的数据,必须满⾜,包含两个json形式的键值对,⼀个是total键,值为表单拥有者在数据库中的全部数据的数量(⾏数),这个数据和pageSize决定table展⽰的页⾯有多少页,另⼀个是rows键,值为多个json对象,rows的每⼀个json对象就是当前table页的⼀⾏实体展⽰,这⾥的rows相当于会给前端table两⾏数据,testID,testName,testPassword分别会被填⼊到table中的field对应的列中-----arams = function (params) { var temp = { //这⾥的键的名字和控制器的变量名必须⼀直，这边改动，控制器也需要改成⼀样的 limit: , //, 页⾯⼤⼩ offset: , testNum: 445, testNum1: 343 };

offset=( - 1) * ,是会被发送到后台使⽤的数据,arams = function (params) { var temp = { //这⾥的键的名字和控制器的变量名必须⼀直，这边改动，控制器也需要改成⼀样的 limit: , //, 页⾯⼤⼩ offset: , testNum: 445, testNum1: 343 };limit=,是会被发送到后台使⽤的数据,sql⽰例SELECT * FROM test WHERE id = ? LIMIT offset,limit表格绑定事件⽤于测试ajax返回的数据是最好的$("#table").bootstrapTable({ method: "post", url: "获取后台数据的url", onLoadSuccess: function(){ //加载成功时执⾏ ("加载成功"); }, onLoadError: function(){ //加载失败时执⾏ ("加载数据失败"); }});

关于事件,更为详细的介绍请访问editable这是在操作table吗,感觉就像是数据库展现在了页⾯上如果你已经阅读完或者已经在⾃⼰代码中实现了上述功能,但是table存在的⽬的本来就不应该只是展现,应该还有寻常的CRUD,精⼒有限,只是实践了update,笔者使⽤的是⾏内编辑的⽅式实现的update,需要⽤到另⼀个⼯具X-editable,不过还好boottable有这样的插件,将x-editable封装整合到了当中,只需要引⼊/bootstrap-table/1.12.1/extensions/editable/t editable$("#table").bootstrapTable({ method: "post", url: "获取后台数据的url", [ {field: 'testId', title: 'ID', editable: {mode: 'popup'} }, {field: 'testName',

title: '姓名'}, {field: 'testPassword',

title: '密码'} ]

... ... ]});

onEditableSave: function (field, row, oldValue, $el) { $.ajax({ type: "post", url: "/ordercenter/", data: { orderid: d, updateCol: field, updateVal: eval('row.'+field) }, dataType: 'JSON', success: function (data, status) { (data); if (status == "success") { alert('旧数据: 订单号: ' + d + ' ' + field + ': ' + oldValue + 'rn' + '更新后的数据: 订单号: ' + Id + ' ' + Col + ': ' + Val) } }, error: function () { alert('编辑失败'); }, complete: function () { } });},details editable编辑后的提交⽅法统⼀放到onEditableSave事件⾥⾯统⼀处理例⼦: 页⾯table中的列姓名,field为testName,实际的值为xiaoming1,通过修改将其改为xiaoming2,这时候field为testName,row为⼀个json,键值对分别为该⾏的所有键值组合,oldValue为xiaoming1更为详细的描述请到建议读者直接使⽤我的onEditableSave,它向后台发送了三个数据精确完成update,⾏特定标识和列特定标识定位到修改了哪⼀个具体的数据,再给出updateVal指出原本的数据被修改成了updateValmoreEditableeditable中的mode的值⼀般是popup,翻译是弹出的意思,也可以使⽤inline值,但是点击并且编辑的时候会使表格样式发⽣改变,⽽popup则不会demoweb-xml / DataSendServlet ndServlet DataSendServlet /DataSendServlet html-demo

js-demovar TableInit = function () {var oTableInit = new Object();//初始化 = function () { $('#Table').bootstrapTable({ url: '/DataSendServlet', //请求后台的URL（*） method: 'get', //请求⽅式（*） async: true, //true表⽰执⾏到这,ajax向后台发起访问,在等待响应的这段时间⾥,继续执⾏下⾯的代码 //设置为true,基本都是后⾯的代码(除⾮还有ajax)先执⾏

// toolbar: '#toolbar', //⼯具按钮⽤哪个容器 striped: true, //是否显⽰⾏间隔⾊ cache: false, //是否使⽤缓存，默认为true，所以⼀般情况下需要设置⼀下这个属性（*） pagination: true, //是否显⽰分页（*） queryParams: arams,//传递参数（*） sidePagination: "server", //分页⽅式：client客户端分页，server服务端分页（*） paginationPreText:'<', //上⼀页按钮样式 paginationNextText:'>', //下⼀页按钮样式 pageNumber: 1, //初始化加载第⼀页，默认第⼀页 pageSize: 10, //每页的记录⾏数（*） pageList: [10, 25, 50, 100], //可供选择的每页的⾏数（*） contentType: "application/x-www-form-urlencoded", //重要选项,必填 showColumns: true, //是否显⽰所有的列 showRefresh: true, //是否显⽰刷新按钮 minimumCountColumns: 2, //最少允许的列数 clickToSelect: true, //是否启⽤点击选中⾏ //height: 700, //⾏⾼，如果没有设置height属性，表格⾃动根据记录条数决定表格⾼度,最好不要设置这个属性 uniqueId: "no", //每⼀⾏的唯⼀标识，⼀般为主键列 showToggle: true, //是否显⽰详细视图和列表视图的切换按钮 cardView: false, //是否显⽰详细视图 detailView: false, //是否显⽰⽗⼦表 columns: [ { field: 'testId', title: 'ID', editable: { mode: 'inline' } }, { field: 'testName', title: '⽤户名' }, { field: 'testPassword', title: '密码' } ], rowStyle: function (row, index) { var classesArr = ['success', 'info']; var strclass = ""; if (index % 2 === 0) {//偶数⾏ strclass = classesArr[0]; } else {//奇数⾏ strclass = classesArr[1]; } return {classes: strclass}; },//隔⾏变⾊ });};//得到查询的参数arams = function (params) { var temp = { //这⾥的键的名字和控制器的变量名必须⼀直，这边改动，控制器也需要改成⼀样的 limit: , //, 页⾯⼤⼩ offset: , testNum: 445, testNum1: 343 }; return temp;};return oTableInit;};server-demopackage ;import tException;import vlet;import rvlet;import rvletRequest;import rvletResponse;import ption;import ation;/** * @author seltonzyf@ * @date 2018/5/10 13:59 */@WebServlet(name = "DataSendServlet")public class DataSendServlet extends HttpServlet { @Override protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { //这⾥输出后台从ajax拿到的数据 Enumeration parameterNames = ameterNames(); while (eElements()) { String s = ement(); String parameter = ameter(s); n("s = " + s); n("parameter = " + parameter); } ter().print("{"total": 11, "rows":[{"testId":9, "testName":"selton", "testPassword": 1}]}"); } @Override protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doPost(request,response); }}注意bootstrap-table只能被调⽤⼀次的问题在inittable之前$("#table").bootstrapTable('destroy');

清空之前表内数据服务器向前端发送的⽤于构建表单的json,所有的键都会变成⼩写