实现bootstraptable可设置列宽和可拖动列宽_bootstraptable列宽左右拖动,bootstrap列表列宽可调整资源-CSDN文库

共14个文件

js：6个

css：6个

json：1个

bootstrap

table列宽

4星 · 超过85%的资源需积分: 44 11 浏览量 2016-11-23 12:35:22 上传评论 16 收藏 117KB RAR 举报

资源推荐

资源详情

资源评论

收起资源包目录

bootstrap table表格可设置列宽和可拖动.rar （14个子文件）

bootstrap table表格可设置列宽和可拖动

css

bootstrap-table-fixed-columns.css 1KB

bootstrap-table.css 7KB

bootstrap.min.css 135KB

bootstrap-select.css 7KB

bootstrap-table.min.css 4KB

bootstrap.css 129KB

colResizable-1.6.js 22KB

jquery-1.11.3.min.js 94KB

bootstrap-table-zh-CN.js 1KB

data.json 4KB

bootstrap.js 59KB

bootstrap-table-fixed-columns.js 6KB

bootstrap-table.js 105KB

index.html 3KB

<!DOCTYPE html> <html> <meta charset="utf-8"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>demo</title> <link href="css/bootstrap.min.css?v=3.3.6" rel="stylesheet"> <link rel="stylesheet" href="css/bootstrap-table.css"> <link href="css/bootstrap-table-fixed-columns.css" rel="stylesheet">  <script src="js/jquery-1.11.3.min.js?v=2.1.4"></script>  <script src="js/bootstrap.js?v=3.3.6"></script>  <script src="js/colResizable-1.6.js"></script>  <script src="js/bootstrap-table.js"></script> <script src="js/bootstrap-table-zh-CN.js"></script> <script src="js/bootstrap-table-fixed-columns.js"></script> <script type="text/javascript"> $(function (){ $('#tableuserInfoQuery').bootstrapTable({ method: 'post', url: 'js/data.json', dataType: "json", striped: true, //使表格带有条纹 pagination: true, //在表格底部显示分页工具栏 pageSize: 20, checkboxHeader:true, height:500, pageNumber: 1, pageList: [10, 20, 50, 100, 200, 500], idField: "userid", //标识哪个字段为id主键 contentType: "application/x-www-form-urlencoded", showColumns: false, //显示隐藏列 showRefresh: false, //显示刷新按钮 singleSelect: false,//复选框只能选择一条记录 search: false,//是否显示右上角的搜索框 clickToSelect: true,//点击行即可选中单选/复选框 sidePagination: "server",//表格分页的位置 queryParams: queryParams, //参数 queryParamsType: "limit", //参数格式,发送标准的RESTFul类型的参数请求 toolbar:"#toolbar", checkboxHeader:true, silent: true, //刷新事件必须设置 columns:[{ align: 'center', checkbox:true, width:'15', valign: 'middle' },{ field: 'loginname', title: '用户名', align: 'center', width:'100', valign: 'middle' },{ field: 'createdt', title: '创建时间', width:'300', align: 'center', valign: 'middle' },{ field: 'roleNames', title: '所属角色', width:500, align: 'center', valign: 'middle' },{ field: 'status', title: '状态', align: 'center', valign: 'middle', formatter:function(value,rowData,rowIndex){ if(value==1||value=='1'){ return '有效'; }else{ return '无效'; } } }], formatLoadingMessage: function () { return "请稍等，正在加载中..."; }, formatNoMatches: function () { //没有匹配的结果 return '无符合条件的记录'; }, onLoadError: function (data) { $('#tableuserInfoQuery').bootstrapTable('removeAll'); }, onDblClickRow: function (row) { } }); }) //查询方法加查询条件 function queryParams(params){ return { limit:params.limit, start:params.start }; } </script> </head> <body> <table id="tableuserInfoQuery"> </table> </body> </html>

评论收藏

内容反馈