BootDo框架的列表对应的js(固定表头及表格内编辑)

一、js初始化(固定表头):

//初始化Table
        $('#tb_order').bootstrapTable({
            url: '/TableStyle/GetOrder',         //请求后台的URL(*)
            method: 'get',                      //请求方式(*)
            //toolbar: '#toolbar',                //工具按钮用哪个容器
            striped: true,                      //是否显示行间隔色
            cache: false,                       //是否使用缓存,默认为true,所以一般情况下需要设置一下这个属性(*)
            pagination: true,                   //是否显示分页(*)
            sortable: false,                     //是否启用排序
            sortOrder: "asc",                   //排序方式
            queryParams: oTableInit.queryParams,//传递参数(*)
            sidePagination: "server",           //分页方式:client客户端分页,server服务端分页(*)
            pageNumber: 1,                       //初始化加载第一页,默认第一页
            pageSize: 10,                       //每页的记录行数(*)
            pageList: [10, 25, 50, 100],        //可供选择的每页的行数(*)
            search: true,                       //是否显示表格搜索,此搜索是客户端搜索,不会进服务端,所以,个人感觉意义不大
            strictSearch: true,
            showColumns: true,                  //是否显示所有的列
            showRefresh: true,                  //是否显示刷新按钮
            minimumCountColumns: 2,             //最少允许的列数
            clickToSelect: true,                //是否启用点击选中行
            height: 500,                        //行高,如果没有设置height属性,表格自动根据记录条数觉得表格高度
            uniqueId: "ID",                     //每一行的唯一标识,一般为主键列
            showToggle: true,                    //是否显示详细视图和列表视图的切换按钮
            cardView: false,                    //是否显示详细视图
            detailView: false,                   //是否显示父子表
            rowStyle: function (row, index) {
                //这里有5个取值代表5中颜色['active', 'success', 'info', 'warning', 'danger'];
                var strclass = "";
                if (row.ORDER_STATUS == "待排产") {
                    strclass = 'success';//还有一个active
                }
                else if (row.ORDER_STATUS == "已删除") {
                    strclass = 'danger';
                }
                else {
                    return {};
                }
                return { classes: strclass }
            },
            columns: [{
                checkbox: true
            }, {
                field: 'ORDER_NO',
                title: '订单编号'
            }, {
                field: 'ORDER_TYPE',
                title: '订单类型'
            }, {
                field: 'ORDER_STATUS',
                title: '订单状态'
            }, {
                field: 'REMARK',
                title: '备注'
            }, ]
        });

要设置表头固定的话,一定需要上面的height属性;

二、设置表格内编辑

引入额外的js:

<link rel="stylesheet" href="//rawgit.com/vitalets/x-editable/master/dist/bootstrap3-editable/css/bootstrap-editable.css">
<script src="//rawgit.com/vitalets/x-editable/master/dist/bootstrap3-editable/js/bootstrap-editable.js"></script>
<script src="~/Content/bootstrap-table/extensions/editable/bootstrap-table-editable.js"></script>

对应的表格js:

{
         field: "name",
         title: "名称",
         editable:true
}

在js里面初始化表格的时候注册编辑保存的事件:

$('#tb_departments').bootstrapTable({
       url: '/Editable/GetDepartment',         //请求后台的URL(*)
         method: 'get',                      //请求方式(*)
         toolbar: '#toolbar',                //工具按钮用哪个容器
         striped: true,                      //是否显示行间隔色
         cache: false,                       //是否使用缓存,默认为true,所以一般情况下需要设置一下这个属性(*)
         pagination: true,                   //是否显示分页(*)
         sortable: false,                     //是否启用排序
         sortOrder: "asc",                   //排序方式
         queryParams: oTableInit.queryParams,//传递参数(*)
         sidePagination: "server",           //分页方式:client客户端分页,server服务端分页(*)
         pageNumber: 1,                       //初始化加载第一页,默认第一页
         pageSize: 10,                       //每页的记录行数(*)
         onEditableSave: function (field, row, oldValue, $el) {
             $.ajax({
                 type: "post",
                 url: "/Editable/Edit",
                 data: { strJson: JSON.stringify(row) },
                 success: function (data, status) {
                     if (status == "success") {
                         alert("编辑成功");
                     }
                 },
                 error: function () {
                     alert("Error");
                 },
                 complete: function () {

                 }

             });
         }
   });

对应的方法里面需要自己处理保存的逻辑。四个参数field, row, oldValue, $el分别对应着当前列的名称、当前行数据对象、更新前的值、编辑的当前单元格的jQuery对象。

BootDo是高效率,低封装,面向学习型,面向微服的开源JavaEE开发框架BootDo是在SpringBoot基础上搭建的一个Java基础开发平台,MyBatis为数据访问层,ApacheShiro为权限授权层,Ehcahe对常用数据进行缓存。 BootDo主要定位于后台管理系统学习交流,已内置后台管理系统的基础功能和高效的代码生成工具,包括:系统权限组件、数据权限组件、数据字典组件、核心工具组件、视图操作组件、工作流组件、代码生成等。前端界面风格采用了结构简单、性能优良、页面美观大气的TwitterBootstrap页面展示框架。采用分层设计、双重验证、提交数据安全编码、密码加密、访问验证、数据权限验证。使用Maven做项目管理,提高项目的易开发性、扩展性。 BootDo目前包括以下四大模块,系统管理(SYS)模块、内容管理(CMS)模块、在线办公(OA)模块、代码生成(GEN)模块。系统管理模块,包括企业组织架构(用户管理、机构管理、区域管理)、菜单管理、角色权限管理、字典管理等功能;内容管理模块,包括内容管理(文章、链接),栏目管理、站点管理、公共留言、文件管理、前端网站展示等功能;在线办公模块,提供简单的请假流程实例;代码生成模块,完成重复的工作。 BootDo提供了常用工具进行封装,包括日志工具、缓存工具、服务器端验证、数据字典、当前组织机构数据(用户、机构、区域)以及其它常用小工具等。另外还提供一个强大的在线代码生成工具。 内置功能: 用户管理:用户是系统操作者,该功能主要完成系统用户配置。 机构管理:配置系统组织机构(公司、部门、小组),树结构展现,可随意调整上下级。 区域管理:系统城市区域模型,如:国家、省市、地市、区县的维护。 菜单管理:配置系统菜单,操作权限,按钮权限标识等。 角色管理:角色菜单权限分配、设置角色按机构进行数据范围权限划分。 字典管理:对系统中经常使用的一些较为固定的数据进行维护,如:是否、男女、类别、级别等。 操作日志:系统正常操作日志记录和查询;系统异常信息日志记录和查询。 连接池监视:监视当期系统数据库连接池状态,可进行分析SQL找出系统性能瓶颈。 工作流引擎:实现业务工单流转、在线流程设计器。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值