t特效与样式（三）——bootstrap.table的用法

1.Bootstrap 让前端开发更快速、简单。所有开发者都能快速上手、所有设备都可以适配、所有项目都适用。
jquery bootstarp 是前端必备开发。
查看你项目的bootstrap版本 按下F12查看bootstrap的运行版本 查看 bootstrap.min.js 就可以看到对应项目的版本相关
bootstrap.min.css

2.初始化页面操作
define([‘jquery’, ‘bootstrap’, ‘backend’, ‘table’, ‘form’], function ($, undefined, Backend, Table, Form) {

var Controller = { } //定义初始化的对象
return Controller; //返回我们定义的对象

});
初始化一个对象之后，然后返回定义的对象 这样就能自定义控制页面操作

使用

3.开始对bootstrap里面函数进行操作
然后我们给controller增加很多属性
查询字段属性:_queryString 定义该字段可以被外部条件改变，默认是空，也就是空搜索条件
index: function (){} 定义一个方法是index ，闭包函数里面 这样就可以被外部直接调用
如果是点击页面需要弹框出其他页面，可以使用index的并列方法，例如当前页面的add edit
点击就会单独加载

     add: function () {
            Controller.api.bindevent();
        },
        edit: function () {
            Controller.api.bindevent();
        },
        api: {
            bindevent: function () {
                Form.api.bindevent($("form[role=form]"));
            }
        }

我们可以看到 触发add/edit事件的时候，触发当前绑定的页面相关逻辑。如果我们要新增很多其他的页面，也就是在table页面打开其他页面，绑定打开对应的页面，然后当前页面的参数就会传入我们关联的页面里面。

4.核心函数 index里面

     //bootstrap的初始化 
Table.api.init({
                extend: {
                    index_url: 'banji/index' + location.search,
                    add_url: 'banji/add',
                    edit_url: 'banji/edit',
                    del_url: 'banji/del',
                    multi_url: 'banji/multi',
                    import_url: 'banji/import',
                    guanli_url:"banji/edit",
                    table: 'banji',
                }
            });
           //将数据渲染到页面的table里面   绑定页面的table的id
            var table = $("#table");

            // 初始化表格
            table.bootstrapTable({
                //初始化的数据 从url里面读取数据 进行渲染
                url: $.fn.bootstrapTable.defaults.extend.index_url,
                //获取主键+排序字段
                pk: 'id',
                sortName: 'weigh',
//fixedColumns属性允许用户固定表格中的某些列，‌使得这些列在滚动时保持固定位置不变，‌而其他列则可以滚动。‌这种功能特别适用于当表格列数较多，‌且用户需要经常查看某些特定列的情况。‌通过设置fixedColumns属性为true，‌并指定fixedNumber参数来确定需要固定的列数
                fixedColumns: true,
                //设置右侧固定的列数（一般是操作栏）
                fixedRightNumber: 1,
                columns: [
                    [
                        //这个按钮是多选的
                        {checkbox: true},
                       //字段列表的显示  将字段加入里面即可
                        {field: 'id', title: __('Id')},
                        // 操作栏目 需要新增各种功能的时候加入里面
                        {field: 'operate', title: __('Operate'), table: table,
                           //点击事件的触发
                            events: Table.api.events.operate,
                           //表单的操作
                            formatter: Table.api.formatter.operate,
                            //列表显示出来的按钮操作
                            buttons: [
                                {
                                    name: 'guanli',
                                   //直接显示在表格里面的文字
                                    text: '班级查看',
								//点击去的时候，出现的文字显示
                                    title: function (table, row) {
                                        return table.title + "班级管理";
                                    },
                                    //展示格式 有弹窗，占据页面  按钮
                                    extend: 'data-toggle="tooltip"',
                                    //样式的控制
                                    classname: 'btn btn-xs btn-info btn-addtabs',
                                    //ico的控制
								 icon: 'fa fa-code',
								//可以跳转到的url
                                    url: function (table, row, j) {
									//表格对象
                                        var url = 'addondev/gen/index?addon=' + table.id;
                                        //跳转打开的URL页面
                                        return Fast.api.fixurl(url);
                                    }
                                },
                            ]
                        }

                    ]
                ]
            });

            // 为表格绑定事件
            Table.api.bindevent(table);

这样就完成了一个表单数据的 字段初始化 排序 还有右侧的按钮显示。基本定制复杂的功能，都需要通过点击，然后显示弹窗页面显示出来。这样就完成。

5.新建页面的加入。
新增控制按钮相关字段操作:

name:唯一标识,其中index/add/edit/del/multi/dragsort这几个框架已经暂用,如果使用将会覆盖已有属性
text:按钮上的文本，可以为空时，为空时按钮将不显示文字信息，为空时最好配置上icon的值
title:按钮的标题信息，当鼠标移到上面时显示的文字，同时作为dialog弹出窗时的标题信息
icon:按钮上的按钮信息，可使用Font-awesome的按钮，当text为空时请务必填写该值
classname:按钮的class标签的值，建议btn btn-xs为必选，这样可以和其它按钮更加协调搭配，可搭配用的按钮颜色有btn-primary、btn-success、btn-danger、btn-warning，还有额外的功能class如btn-dialog、btn-addtabs、btn-ajax
url : 按钮点击后跳转的链接，可选且可使用相对链接。为空时按钮的链接为javascript:;
dropdown:按钮分组名称，用于将按钮分组下拉
refresh:是否在执行完事件后刷新列表，常配合classname:'btn-ajax'使用
confirm:提示确认信息，常配合classname属性为btn-ajax、btn-dialog、btn-addtabs使用
extend:扩展属性，用于扩展按钮的自定义属性，比如自定义尺寸：extend:'data-area=["300px","350px"]'
hidden:控制按钮是否隐藏属性,支持function
visible:控制按钮是否显示属性,支持function
disable:控制按钮是否禁用属性,支持functionaddclass：给标签，额外增加类名

新增页面控制功能的俩种模式:
有俩种模式，一种是利用当前系统里面的页面进行跳转，只是固定搜索参数
第二种是全新制作跳转页面 通过url跳转掉
var url = ‘addondev/gen/index?addon=’ + table.id; 跳转过去的时候是可以带上当前表格的id信息 该种场景主要是方便形成逻辑的方便操作，减少对应的搜索信息。 自动完成搜索页面。

6.加载的index主页面:

​

//整个页面看成一个模块，类似vue的布局  一个项目的控制模块
<div class="panel panel-default panel-intro">
    //头部显示 更改tab切换时候使用到 
    <div class="panel-heading">
       //后端的生成头部信息函数
        {:build_heading(null,FALSE)}
       //tab标签生成 切换  有个激活样式
        <ul class="nav nav-tabs" data-field="status">
            <li class="{:$Think.get.status === null ? 'active' : ''}"><a href="#t-all" data-value="" data-toggle="tab">{:__('All')}</a></li>
            {foreach name="statusList" item="vo"}
            <li class="{:$Think.get.status === (string)$key ? 'active' : ''}"><a href="#t-{$key}" data-value="{$key}" data-toggle="tab">{$vo}</a></li>
            {/foreach}
        </ul>
    </div>
     //tab的主题页面信息
    <div class="panel-body">
        //内容切换生成
        <div id="myTabContent" class="tab-content">
            <div class="tab-pane fade active in" id="one">
                <div class="widget-body no-padding">
                    //边框横幅
                    <div id="toolbar" class="toolbar">
                     //上面的按钮功能 刷新/新增/编辑/删除/更多
                        <a href="javascript:;" class="btn btn-primary btn-refresh" title="{:__('Refresh')}" ><i class="fa fa-refresh"></i> </a>
                        <a href="javascript:;" class="btn btn-success btn-add {:$auth->check('pays/add')?'':'hide'}" title="{:__('Add')}" ><i class="fa fa-plus"></i> {:__('Add')}</a>
                        <a href="javascript:;" class="btn btn-success btn-edit btn-disabled disabled {:$auth->check('pays/edit')?'':'hide'}" title="{:__('Edit')}" ><i class="fa fa-pencil"></i> {:__('Edit')}</a>
                        <a href="javascript:;" class="btn btn-danger btn-del btn-disabled disabled {:$auth->check('pays/del')?'':'hide'}" title="{:__('Delete')}" ><i class="fa fa-trash"></i> {:__('Delete')}</a>
                        //更多选项的按钮操作
                        <div class="dropdown btn-group {:$auth->check('pays/multi')?'':'hide'}">
                            <a class="btn btn-primary btn-more dropdown-toggle btn-disabled disabled" data-toggle="dropdown"><i class="fa fa-cog"></i> {:__('More')}</a>
                           
                            <ul class="dropdown-menu text-left" role="menu">
                                {foreach name="statusList" item="vo"}
                                <li><a class="btn btn-link btn-multi btn-disabled disabled" href="javascript:" data-params="status={$key}">{:__('Set status to ' . $key)}</a></li>
                                {/foreach}
                            </ul>
                        </div>  
                    </div>
                    //我们在前面渲染出来的数据表，放入数据表里面 
                    <table id="table" class="table table-striped table-bordered table-hover table-nowrap"
                           data-operate-edit="{:$auth->check('pays/edit')}"
                           data-operate-del="{:$auth->check('pays/del')}"
                           width="100%">
                    </table>
                </div>
            </div>

        </div>
    </div>
</div>

7.按钮框里面使用ajax 进行交互 （在button里面）

Fast.api.ajax({
   url:'控制器/方法',
   data:{name:"名称"},　　loading:false, //是否显示loading
success:function(data, ret){
   //成功的回调
   alert(ret.msg);
   return false; //返回false，则阻断系统的提示，系统识别的格式：{code:1,msg:'',data:null}
}, error:function(data, ret){
   //失败的回调
   alert(ret.msg);
   return false;}
});

交互成功后，一般需要刷新当前页面 $(“.btn-refresh”).trigger(“click”);