DaiCuoBBs

 找回密码
 免费注册

QQ登录

只需一步,快速开始

[设计文档] DaiCuo框架使用bootstrap-table一些常用的属性

[复制链接]
admin 发表于 2019-12-18 20:01:32 | 显示全部楼层 |阅读模式
  1. $('.modal-dialog').addClass('modal-dialog-scrollable modal-lg');
  2. $('#table').bootstrapTable({
  3.         cache: false,
  4.         uniqueId: 'term_id',
  5.         idField: 'term_id',
  6.         totalField: 'total',
  7.         dataField: 'rows',        
  8.         method: 'get',
  9.         dataType: "json",
  10.         contentType: 'application/json',//application/x-www-form-urlencoded
  11.         url: '{:url("admin/category/api","","")}',//请求后台的URL(*)
  12.         toolbar: '#toolbar',//工具按钮用哪个容器
  13.         toolbarAlign: 'left',//工具按钮对齐方向
  14.         //undefinedText: "空",//当数据为 undefined 时显示的字符
  15.         sorttable: true, //是否排序
  16.         //sortClass:'text-muted',//已排序类名称
  17.         sortName:'term_id',//定义要排序的列
  18.         sortOrder: "desc", //排序方式
  19.         pagination: false, //设置为 true 会在表格底部显示分页条。
  20.         onlyInfoPagination: false,//只显示总信息不显示分页
  21.         showExtendedPagination: false,//分页高级版
  22.         sidePagination:'client',//client|server
  23.         //queryParamsType:'limit',//server时有用 limit|空
  24.         //queryParams:queryParams,//server时有用
  25.     pageNumber: 1,//初始化加载第一页,默认第一页
  26.     pageSize: 2,//每页的记录行数(*)
  27.         pageList: [10, 20, 30, 40],//可供选择的每页的行数(*),当记录条数大于最小可选择条数时才会出现
  28.         paginationLoop:true,//分页连续循环模式
  29.         paginationHAlign:'right',//水平对齐方式
  30.         paginationVAlign:'bottom',//垂直对齐方式
  31.         paginationDetailHAlign:'left',//对齐细节
  32.         paginationPreText: '<',
  33.         paginationNextText: '>',
  34.         paginationSuccessivelySize:5,//连续的最大连续页数
  35.         paginationPagesBySide:1,//向左向右递步值
  36.         paginationUseIntermediate:false,//是否计算未显示的页
  37.         showRefresh:true,//刷新
  38.         search: true,//是否显示表格搜索
  39.         //searchAlign: 'right',//搜索水平对齐
  40.         showSearchButton: false,//是否显示搜索按钮
  41.         strictSearch: false,//是否严格搜索
  42.         striped : true,//隔行变色
  43.         showColumns: false,//是否显示 内容列下拉框
  44.         showColumnsToggleAll:false,//是否显示 切换所有
  45.         showToggle: true,//是否显示详细视图和列表视图的切换按钮
  46.         showPaginationSwitch: false,//是否显示分页切换按钮
  47.         showFullscreen: true,//是否全屏
  48.         //buttonsToolbar:'#buttonbar',//自定义按钮容器        
  49.         //buttonsPrefix:'btn',//按钮前缀
  50.         //buttonsClass:'secondary',//按钮样式
  51.         //buttonsAlign:'right',//按钮对齐
  52.         //showButtonIcons:true,//按钮图标
  53.         //showButtonText:false,//按钮文字
  54.         clickToSelect: false,//是否启用点击选中行
  55.         singleSelect: false,//复选框是否只允许选中一行
  56.         checkboxHeader: true,//false时隐藏check-all复选框
  57.         iconSize:'sm',
  58.         icons:{
  59.     paginationSwitchDown: 'fa-caret-down',
  60.     paginationSwitchUp: 'fa-caret-up',
  61.     refresh: 'fa-refresh',
  62.     toggleOff: 'fa-toggle-off',
  63.     toggleOn: 'fa-toggle-on',
  64.     columns: 'fa-th-list',
  65.     fullscreen: 'fa-arrows-alt',
  66.     detailOpen: 'fa-plus',
  67.     detailClose: 'fa-minus'
  68.   },
  69.   columns: [{
  70.                 checkbox:true
  71.   }, {
  72.     field: 'term_id',
  73.     title: '栏目ID',
  74.                 width:'100',
  75.                 sortable: true,
  76.   }, {
  77.     field: 'term_name',
  78.         //width:'200',
  79.     title: '栏目名称'
  80.   }, {
  81.     field: 'term_slug',
  82.         width:'200',
  83.     title: '栏目别名'
  84.   }, {
  85.     field: 'term_module',
  86.         width:'200',
  87.     title: '栏目别名'
  88.   },{
  89.     field: 'term_id',
  90.         width:'100',
  91.     title: '操作',
  92.         formatter: 'test'
  93.   }],
  94.         onLoadSuccess: function () {
  95.                 //$('.bootstrap-table .bs-bars').addClass('col-12');
  96.                 //$('.bootstrap-table .search').addClass('col-3');
  97.                 $('.bootstrap-table .columns').addClass('d-none d-md-inline');
  98.                 daicuo.event.edit();
  99.         },
  100.         onLoadError: function () {
  101.         },
  102.         onCheckAll:function(rows){
  103.         }
  104. });
  105. function test(value,row,index,field){
  106.         var $url_edit = $('#table').attr('data-edit-url')+value;
  107.         return '<div class="btn-group btn-group-sm"><a class="btn btn-outline-secondary bg-light" href="'+$url_edit+'" data-toggle="edit"><i class="fa fa-fw fa-pencil"></i></a><a class="btn btn-outline-secondary" href="'+$url_edit+'" data-toggle="delete"><i class="fa fa-fw fa-trash-o"></i></a></div>';
  108. }
  109. function queryParams(params) {
  110.         params.limit = 10;
  111.         params.offset = 1;
  112.         params.sort = 'id';
  113.         params.order = 'desc';
  114.         params.search = 8;
  115.         return params
  116. }
复制代码
来自官方比较详细的例子:https://examples.bootstrap-table ... mp;url=welcome.html

您需要登录后才可以回帖 登录 | 免费注册

本版积分规则

QQ|Archiver|手机版|小黑屋|大错站长论坛

GMT+8, 2020-7-5 05:25 , Processed in 0.055604 second(s), 22 queries .

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表