标签:column apk object list() box tip result window 点击其他
bootstrapTable
中文官方网站http://bootstrap-table.wenzhixin.net.cn
1.文件引用
//1、引用Jquery <script src="~/Scripts/jquery-1.10.2.js"></script> //2、应用bootstrap <script src="~/Content/bootstrap/bootstrap.js"></script> <link href="~/Content/bootstrap/bootstrap.css" rel="stylesheet" /> //3、引用bootstrap table组件 <script src="~/Content/bootstrap-table/bootstrap-table.js"></script> <link href="~/Content/bootstrap-table/bootstrap-table.css" rel="stylesheet" /> <script src="~/Content/bootstrap-table/locale/bootstrap-table-zh-CN.js"></script>
2.bootstrap-table说明
关于列参数的操作
formatter:对列参数进行格式化,可以返回value值,也可以返回一个dom元素,例如一个操作按钮
editable:实现列参数的可编辑功能。validate:对列参数的内容限制,可提示异常信息
关于分页
sidePagination可以在客户端分页,填写参数的值为"client",客户端分页也就是将所有数据取出,前端分页展示,弊端就是数据量比较大的时候,会查询比较慢;
也可以在服务端分页,填写参数的值为"server",服务端分页也就是后端分页,后端接收到分页参数,每次查询传递的参数那么多数据,点击其他页面时再次出发查询请求,需要limit页面大小,offset页面偏移量两个参数
具体需要在queryParams处,填写页面大小和页面偏移量
limit: params.limit, //页面大小 offset: params.offset, //页码偏移量
hibernate 数据dao的实现层,具体的sql语句如下
@Override public List findByPage(final String hql, final Object value, final int offset, final int pageSize) { // TODO Auto-generated method stub // 通过一个HibernateCallback 对象来执行查询 // System.out.println(hql); List list = getHibernateTemplate().executeFind(new HibernateCallback() { // 实现hibernateCallback接口必须实现的方法 @Override public Object doInHibernate(Session session) throws HibernateException { // 执行hibernate 分页查询 Query query= session.createQuery(hql); whereParameter((AppiumConfig)value, query); List result =query .setFirstResult(offset).setMaxResults(pageSize).list(); session.close(); return result; } }); return list; }
3.bootstrap-table代码
//1.初始化Table
var oTable = new TableInit();
oTable.Init();
var TableInit = function () { var oTableInit = new Object(); //初始化Table oTableInit.Init = function () { $(‘#tb_appiumconfig‘).bootstrapTable({ url: ‘/appAppium/list.do‘, //请求后台的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: false, //是否显示所有的列 showRefresh: true, //是否显示刷新按钮 minimumCountColumns: 2, //最少允许的列数 clickToSelect: true, //是否启用点击选中行 height: 500, //行高,如果没有设置height属性,表格自动根据记录条数觉得表格高度 uniqueId: "ID", //每一行的唯一标识,一般为主键列 showToggle: false, //是否显示详细视图和列表视图的切换按钮 cardView: false, //是否显示详细视图 detailView: false, //是否显示父子表 columns: [{ checkbox: true, width: ‘3%‘, }, { field: ‘id‘, title: ‘id‘, visible: false }, { field: ‘projectid‘, title: ‘projectid‘, visible: false }, { field: ‘projectname‘, title: ‘项目名称‘, width: ‘10%‘, }, { field: ‘apppackage‘, title: ‘app包名‘, width: ‘10%‘, }, { field: ‘apkupload‘, title: ‘apk路径‘, width: ‘30%‘, formatter: function (value, row, index) { console.log(row); return value; } }, { field: ‘updatetime‘, title: ‘更新时间‘, width: ‘10%‘, }, /*{ field: ‘clientip‘, title: ‘客户端IP‘, width: ‘7%‘, formatter: function (value, row, index) { if (value.indexOf("**0") > -1) { return ‘<font style="color:#00bf5f">‘ + value.substring(0, value.indexOf("**0")) + ‘</font>‘; } else if (value.indexOf("**1") > -1) { return ‘<font style="color:#ff0000">‘ + value.substring(0, value.indexOf("**1")) + ‘</font>‘; } else { return ‘<font style="color:#FF7F00">‘ + value + ‘</font>‘; } } },*/ { field: ‘operationer‘, title: ‘更新人员‘, width: ‘10%‘, }, { field: ‘remark‘, title: ‘备注‘, width: ‘20%‘, editable: { type: ‘textarea‘, title: ‘备注‘, emptytext: "无备注", validate: function (value) { if (value.length > 200) return ‘备注不能超过200个字符‘; } } }], onEditableSave: function (field, row, oldValue, $el) { var status = document.getElementById("loginstatus").value; if (status == "false") { if (window.confirm("你未登录哦,要先去登录吗?")) { var url = ‘/progressus/signin.jsp‘; window.location.href = url; return true; } else { return false; } } $(‘#tb_appiumconfig‘).bootstrapTable("resetView"); $.ajax({ type: "post", url: "/appAppium/update.do", data: row, dataType: ‘JSON‘, success: function (data, status) { if (data.status == "success") { toastr.success(data.ms); } else { $(‘#tb_appiumconfig‘).bootstrapTable(‘refresh‘); toastr.info(data.ms); } }, error: function () { toastr.error(‘编辑失败!‘); }, complete: function () { } }); } }); }; //得到查询的参数 oTableInit.queryParams = function (params) { var temp = { //这里的键的名字和控制器的变量名必须一直,这边改动,控制器也需要改成一样的 limit: params.limit, //页面大小 offset: params.offset, //页码偏移量 search: params.search, //搜索参数 projectid: $(‘#search_project‘).val(), //项目ID }; return temp; }; return oTableInit; };
使用过程中遇到的问题后续补充,,,
标签:column apk object list() box tip result window 点击其他
原文地址:https://www.cnblogs.com/alasijia/p/9332170.html