common.client.js 客户端
/** * 重写bootstrapTable 的默认参数 * 减少每页的配置 服务端配置 */ $.extend($.fn.bootstrapTable.defaults,{ method:'post', search:false, //height : getHeight(), pagination : true, // 分页 pageSize:30,//设置分页条数 striped : true, // 是否显示行间隔色 contentType: "application/x-www-form-urlencoded", //clickToSelect: true,//是否启用点击选中行 //showToggle:true,//是否显示详细视图和列表视图的切换按钮 cache : false, // 是否使用缓存 pageList: [30, 50, 100], //showColumns : true, // 显示隐藏列 //showRefresh : true, // 显示刷新按钮 sidePagination : "client" // 客户端处理分页 });
common.server.js 服务端
/** * 重写bootstrapTable 的默认参数 * 减少每页的配置 服务端配置 */ $.extend($.fn.bootstrapTable.defaults,{ method:'post', search:false, height : getHeight(), pagination : true, // 分页 pageSize:30,//设置分页条数 striped : true, // 是否显示行间隔色 contentType: "application/x-www-form-urlencoded", //clickToSelect: true,//是否启用点击选中行 //showToggle:true,//是否显示详细视图和列表视图的切换按钮 cache : false, // 是否使用缓存 //pageList : [ 20,30, 50], pageList: [30, 50, 100], showColumns : true, // 显示隐藏列 //showRefresh : true, // 显示刷新按钮 sidePagination : "server" // 服务端处理分页 });
js代码
<script> var $table = $('#empUserList'), $query = $('#btn_query'), $reset = $('#btn_reset'), $remove = $('#btn_delete'), $add = $('#btn_add'), $export = $('#btn_export'), selections = [], permissionButton = [ '<shiro:hasPermission name="sys:user:update"><a class="btn btn-icon-only" data-type="edit" href="javascript:void(0)" title="修改">', '<i class="glyphicon glyphicon-edit"></i></a></shiro:hasPermission>', '<shiro:hasPermission name="sys:user:delete"><a class="btn btn-icon-only" data-type="delete" href="javascript:void(0)" title="删除">', '<i class="glyphicon glyphicon-remove"></i></a></shiro:hasPermission>' ].join('');//权限按钮 $(function () { /*$("#test").click(function () { $.get('${ctx}/showPhotoAlbum?destDir=user&id='+30, function(json){ layer.photos({ photos: json }); }); });*/ $table.bootstrapTable({ url: '${ctx}/user/getUserPageList', /*detailView:true, detailFormatter:detailFormatter,*/ queryParams: queryParams, buttonsAlign: "right", //按钮位置 toolbar: "#toolbar",// 指定工具栏 uniqueId: "id", // 每一行的唯一标识 columns: [{ checkbox: true }, { title: '区域', field: 'sysArea.name', // 字段 align: 'center', // 对齐方式（左 中 右） valign: 'middle', // sortable: true }, { title: '部门', field: 'sysDepartment.name', // 字段 align: 'center', // 对齐方式（左 中 右） valign: 'middle', // sortable: true }, { title: '用户名', field: 'username', // 字段 align: 'center', // 对齐方式（左 中 右） valign: 'middle', // sortable: true }, { title: '是否启用', field: 'flag', // 字段 align: 'center', // 对齐方式（左 中 右） valign: 'middle', // sortable: true,
formatter: function (value, row, index) { return ""; }}, { title: '是否为领导', field: 'leader', // 字段 align: 'center', // 对齐方式（左 中 右） valign: 'middle', // sortable: true }, { title: '操作', field: 'id', align: 'center', valign: 'middle', sortable: true, formatter: actionFormatter, events: actionEvents }], onLoadSuccess: function () { //加载成功时执行 //layer.msg("加载成功"); //$('#empUserList').bootstrapTable("refresh"); //默认最小 $( '.switch input '). bootstrapSwitch({ size: "mini" }); }, onLoadError: function () { //加载失败时执行 layer. msg( "加载数据失败", { time: 1500, icon: 2}); } }); // sometimes footer render error. setTimeout( function () { $table. bootstrapTable( 'resetView', { height: getHeight() }); }, 300); $( window). resize( function () { $table. bootstrapTable( 'resetView', { height: getHeight() }); }); //点击行中的checkbox 和全选的checkbox事件 $table. on( 'check.bs.table uncheck.bs.table ' + 'check-all.bs.table uncheck-all.bs.table', function () { $remove. prop( 'disabled', ! $table. bootstrapTable( 'getSelections'). length); // save your data, here just save the current page selections = getIdSelections(); }); $query. click( function () { $table. bootstrapTable( 'refresh'); //从新加载数据 }); $reset. click( function () { $( ".form-inline .form-control"). val( ""); $table. bootstrapTable( 'refresh'); //从新加载数据 }); $add. click( function () { layer_show( "用户添加", " ${ ctx } /user/userAdd", "800", "600"); }); $remove. click( function () { if ( selections. length < 1) { $. fn. modalAlert( '请选择一条或多条数据进行删除！', 'error'); } else { var list = new Array(); for ( var i = 0; i < selections. length; i++) { if ( selections[ i] == ' ${ sessionScope.loginUser.id } ') { $. fn. modalAlert( '不可以删除自己！', 'error'); return; } else { var user = {}; user. id = selections[ i]; list. push( user); } } //询问框 $. fn. modalConfirm( '确定要删除所选数据？', function () { $. ajax({ url: ' ${ ctx } /user/deleteUserInBatch', type: "Post", data: { item: JSON. stringify( list)}, dataType: "json", success: function (result) { if (result > 0) { $. fn. modalMsg( "操作成功", "success"); } else { $. fn. modalMsg( "操作失败", "error"); } $remove. prop( 'disabled', true); $table. bootstrapTable( 'refresh'); //从新加载数据 } }); }); } }); /*$export.click(function () { $('#userForm').attr('action', "../user/exportUserList"); $('#userForm').submit(); });*/ /* input 获取焦点 才能触发 刷新事件*/ $( "input"). keydown( function () { if ( event. keyCode == "13") { //keyCode=13是回车键 if ( $query. length > 0) { $table. bootstrapTable( 'refresh'); //从新加载数据 } } }); $table. on( 'switchChange.bootstrapSwitch', '.switch', function (event, state) { var id = $( this). attr( 'data-id'); $. ajax({ url: ' ${ ctx } /user/updateUserByFlag', type: "Post", data: { id: id, flag: !state,}, dataType: "json", success: function (result) { if (result > 0) { $. fn. modalMsg( "操作成功", "success"); } else { $. fn. modalMsg( "操作失败", "error"); } //$table.bootstrapTable('refresh'); //从新加载数据 } }); }); }); function detailFormatter(index, row) { var html = []; $. each(row, function (key, value) { html. push( '<p><b>' + key + ':</b> ' + value + '</p>'); }); return html. join( ''); } function actionFormatter(value, row, index) { return permissionButton; } window. actionEvents = { 'click [data-type="edit"]': function (e, value, row) { layer_show( "用户修改", " ${ ctx } /user/userUpdate?id=" + value, "800", "600"); }, 'click [data-type="delete"]': function (e, value, row) { if (value == ' ${ sessionScope.loginUser.id } ') { $. fn. modalAlert( '不可以删除自己！', 'error'); return; } $. fn. modalConfirm( '确定要删除所选数据？', function () { $. ajax({ url: ' ${ ctx } /user/deleteUser', type: "Post", data: { id: value}, dataType: "json", success: function (result) { if (result > 0) { $. fn. modalMsg( "操作成功", "success"); } else { $. fn. modalMsg( "操作失败", "error"); } $remove. prop( 'disabled', true); $table. bootstrapTable( 'refresh'); //从新加载数据 } }); }); } }; /** * 返回所有的checked选中的值 */ function getIdSelections() { return $. map( $table. bootstrapTable( 'getSelections'), function (row) { return row. id }); } function flagFormatter(value, row, index) { var str = ""; if (value) { //str = "<span class='label label-warning'>否</span> " ; str = "<div class='switch switch-mini' data-on='primary' data-off='info' data-id='" + row. id + "'><input type='checkbox' /></div>"; } else { //str = "<span class='label label-info'>是</span> " ; str = "<div class='switch switch-mini' data-on='primary' data-off='info' data-id='" + row. id + "'><input type='checkbox' checked /></div>"; } return str; } function leaderFormatter(value, row, index) { var str = ""; if (value) { str = "是"; } else { str = "否"; } return str; } /**查询条件与分页数据 */ function queryParams(params) { var temp = { //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的 limit: params. limit, //页面大小 offset: params. offset, //页码 sort: params. sort, //排序列名 order: params. order, //排序方式 search: params. search, //搜索框参数 username: $( "#username"). val() //loginFlag:$("#loginFlag").val() }; return temp; } </ script >