本文共 7683 字,大约阅读时间需要 25 分钟。
bootstrap Table 的优势:
1、界面采用扁平化的风格,用户体验比较好,更好兼容各种客户端。 2、开源、免费。 3、相对Jqgrid、easyUI而言,比较轻量级。功能不能说最全面,但基本够用。<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>用户管理 <%----%>
var oTable = null;var groupId = "";$(function () { //1.初始化Table oTable = new TableInit(); oTable.Init(); //2.初始化Button的点击事件 var oButtonInit = new ButtonInit(); oButtonInit.Init();});var columns = [{ checkbox: true}, { field: 'id', title: '主键id', visible: false}, { field: 'Code', title: '编码', /* visible:false*/}, { field: 'partment', title: '部门', width: '90px',}, { field: 'category', title: '类别',}];var TableInit = function () { var oTableInit = new Object(); //初始化Table oTableInit.Init = function () { $('#table').bootstrapTable({ url: '../../frame/listAllPower', //请求后台的URL(*) method: 'post', //请求方式(*) /* toolbar: '#toolbuton', //工具按钮用哪个容器*/ striped: true, //是否显示行间隔色 cache: false, //是否使用缓存,默认为true,一般情况下需要设置这个属性(*) pagination: true, //是否显示分页(*) sortable: false, //是否启用排序 sortOrder: "asc", //排序方式 queryParams: oTableInit.queryParams,//传递参数(*) sidePagination: "server", //分页方式:client分页,server分页(*) contentType: "application/x-www-form-urlencoded", dataType: 'json', pageNumber: 1, //初始化加载第一页,默认第一页 pageSize: 10, //每页的记录行数(*) pageList: [10, 25, 50, 100], //可供选择的每页的行数(*) search: false, //是否显示表格搜索,此搜索是客户端搜索,意义不大 strictSearch: true, showColumns: false, //是否显示所有的列 showRefresh: false, //是否显示刷新按钮 minimumCountColumns: 2, //最少允许的列数 clickToSelect: true, //是否启用点击选中行 singleSelect: true, height: 500, //行高,如果未设置height属性,表格自动根据记录条数决定表格高度 uniqueId: "ID", //每一行的唯一标识,一般为主键列 showToggle: false, //是否显示详细视图和列表视图的切换按钮 cardView: false, //是否显示详细视图 detailView: false, //是否显示父子表 columns: columns }); }; //得到查询的参数 oTableInit.queryParams = function (params) { var temp = { //这里的key和controller的变量名一致 rows: params.limit, //页面大小 page: params.offset / params.limit + 1,//页码 queryParam: params.queryparam //查询的参数 }; return temp; }; oTableInit.refresh = function () { $("#table").bootstrapTable('refresh', { url: '../../frame/listAll' }); } return oTableInit;};var ButtonInit = function () { var oInit = new Object(); var postdata = {}; oInit.Init = function () { //初始化页面上面的按钮事件 }; return oInit;};function refreshData() { $("#table").bootstrapTable('refreshOptions', { columns: columns, url: '../../frame/listAll', pageNumber: 1, //再次查询的起始页从第1页开始显示 queryParams: function (params) { return { rows: params.limit, //页面大小 page: params.offset / params.limit + 1, queryparam: $('#param').val() //根据条件查询 } } });};//添加function addList() { var options = { success: addCallBack, dataType: 'json', url: '../../frame/addObject' }; $("#addPostForm").ajaxForm(options); $('#addPostForm').submit();};function addCallBack(result, statusText) { if (result == 1) { showDialog('提示', '保存成功!', callBack); $("#addPostForm")[0].reset(); oTable.refresh(); } else { showDialog('提示', '保存失败!', callBack); } ; function callBack() { $(".modal").modal('hide'); $("#MyDiv").hide(); $("#fade").hide(); // oTable.refresh(); window.location.reload(); }}//编辑function updateList() { var options = { success: editCallBack, dataType: 'json', url: '../../frame/updateObject' }; $("#editPostForm").ajaxForm(options); $('#editPostForm').submit();};function editCallBack(result, statusText) { if (result == 1) { showDialog('提示', '保存成功!', callBack); $("#editPostForm")[0].reset(); oTable.refresh(); } else { showDialog('提示', '保存失败!', callBack); } ; function callBack() { $(".modal").modal('hide'); $("#EditDiv").hide(); $("#EditFade").hide(); $("#fade").hide(); window.location.reload(); }}//删除function deleteObject() { var selectedRow = $('#table').bootstrapTable('getSelections', null); if (selectedRow == null || selectedRow.length == 0) { alert("请选择要删除的记录"); return false; } var flag = confirm("确认删除这条记录?"); if (flag == true) { $.ajax({ method: 'post', url: '../../frame/deleteObject', dataType: 'json', data: { id: selectedRow[0].id }, success: function (result) { if (result > 0) { alert("删除成功!"); oTable.refresh(); } else { alert("删除失败"); oTable.refresh(); } } }); }}
注意:
如果是服务端分页,返回的结果必须包含total
、rows
两个参数。漏写或错写都会导致表 格无法显示数据。相反,如果是客户端分页,这里要返回一个集合对象到前端。
public ListselectByClause(String page, String rows, String department) { if (rows == null || "".equals(rows)) { rows = "10"; } if (page == null || "".equals(page)) { page = "1"; } else { int p = Integer.parseInt(page); int r = Integer.parseInt(rows); int pr = (p - 1) * r + 1; page = String.valueOf(pr); } Map map = new HashMap (); map.put("page", Integer.parseInt(page) - 1); map.put("pageSize", Integer.parseInt(rows)); map.put("department", department); List list = listMapper.selectByClause(map); return list; }
@Transactional@RequestMapping(value = "/frame/listAllPower")@ResponseBodypublic Map listAll(HttpServletResponse response, String page, String rows, String department) throws IOException { Listlist = ListService.selectByClause(page, rows, department); Map map = new HashMap (); map.put("department", department); int count = listMapper.selectCountByClause(map); JSONObject result = new JSONObject(); JSONArray jsonArray = JSONArray.fromObject(list); result.put("total", count); result.put("rows", jsonArray); try { ResponseUtil.write(response, result); } catch (Exception e) { e.printStackTrace(); } return null;}
Bootstrap中文网:
Bootstrap Table API:
Bootstrap DatePicker:
转载地址:http://ynqqd.baihongyu.com/