精华内容
下载资源
问答
  • Bootstrap table

    2017-12-06 22:31:32
    Bootstrap Table是基于Bootstrap的轻量级表格插件,只需要简单的配置就可以实现强大的支持固定表头、单复选、排序、分页、搜索以及自定义表头等功能
  • Bootstrap Table API 中文版(完整翻译文档)

    万次阅读 多人点赞 2017-09-11 20:20:27
    *$('#table').bootstrapTable({}); *看网上有中文版的,但有些就是字面直接译过来了,而且有的就没有翻译,那就打算自己再翻译一遍,每一条会尽 *最大可能结合尽可能多资料翻译,如果发现译的内容比英文多,是添加了...

    Bootstrap table API 中文文档(完整翻译文档)
    *$(’#table’).bootstrapTable({});
    *看网上有中文版的,但有些就是字面直接译过来了,而且有的就没有翻译,那就打算自己再翻译一遍,每一条会尽
    *最大可能结合尽可能多资料翻译,如果发现译的内容比英文多,是添加了更详细的说明,表的名称,属性,类型,
    *默认值不翻译,例如:“class”、"id"等不翻译。
    *有错请提出,会及时改正,谢谢。
    如果想转请评论留个言并注明原博 @Sclifftop https://blog.csdn.net/S_clifftop/article/details/77937356

    给我评论点赞,听到没有,臭弟弟


    • “名称”可以写在$('#table').bootstrapTable({});的大括号中,可以定义一些想要的值,如:
    $("#realTime_Table").bootstrapTable({
      	  search: true,
          pagination: false,
          pageSize: 15,
          pageList: [5, 10, 15, 20],
          showColumns: true,
          showRefresh: false,
          showToggle: true,
          locale: "zh-CN",
          striped: true
    });  
    
    • “属性”放在声明表内,如:
    <!--例子应该很好看懂Table options和Column options 所放的位置不同,随便写的,主要为了懂得如何用--!>
    
     <table id="realTime_Table" data-click-to-select="true" class="table table-bordered" data-page-size="20">
          <thead>
              <tr >
                  <th data-sortable="true" data-field="realTimeDate">日期</th>
                  <th data-sortable="true" data-field="newPlayerNum">新增用户</th>
                  <th data-sortable="true" data-field="activePlayerNum">活跃用户</th>
              </tr>
          </thead>
          <tbody>
          </tbody>
    </table>
    
    • 如果名称和属性功能类似,则任意一个地方就够了,不用重复定义,有的属性写在js里比名称写在声明表中更为简单,or vice verse(有的属性必须要写,对应的名称只是表示是否启用那个属性)


    表的各项(Table options )

    定义在 jQuery.fn.bootstrapTable.defaults 文件内

    名称属性类型默认值作用描述
    -data-toggleStringtable只要引入 jquery、bootstrap 、bootstrap-table的包,不用在js里面定义就可以使用
    默认有写data-toggle="table",data-toggle应该知道吧,常用的有"tooltip、popover等等",这边就不说了
    classesdata-classesStringtable table-hover表的class属性,如果没有自己定义,则默认有边框,并且当鼠标悬浮在那一行,背景会变为浅灰色.
    sortClassdata-sort-classStringundefined声明表格td的class名,代表此列元素的class名将被排序
    heightdata-heightNumberundefined表格的高度
    undefinedTextdata-undefined-textString - 当不写任何内容默认显示'-'
    stripeddata-stripedBooleanfalse默认false,当设为true,则每行表格的背景会显示灰白相间
    sortNamedata-sort-nameStringundefined定义哪一列的值会被排序,写data-field的自定义名,没定义默认都不排列,同下面的sortOrder结合使用,没写的话列默认递增(asc)
    sortOrderdata-sort-orderStringasc同上面的结合使用,默认递增(asc),也可设为递减(desc)
    sortStabledata-sort-stableBooleanfalse(别看错了,是sortStable,sortable在下面)默认false,设为true,则和sort部分一样,区别是:在排序过程中,如果存在相等的元素,则原来的顺序不会改变。原文还有一句:(如果你把此属性设为了true)我们将为此行添加'_position'属性
    iconsPrefixdata-icons-prefixStringglyphicon定义字体库 ('Glyphicon' or 'fa' for FontAwesome),使用"fa"时需引用 FontAwesome,并且配合 icons 属性实现效果 Glyphicon 集成于Bootstrap可免费使用
    iconSizedata-icon-sizeStringundefined定义的图标大小:
          - undefined =>默认表示默认的按钮尺寸(btn)
          - xs   =>超小按钮的尺寸(btn-xs)
          - sm  =>小按钮的尺寸(btn-sm)
          - lg    =>大按钮的尺寸(btn-lg)
    buttonsClassdata-buttons-classStringdefault按钮的类,默认为default。
          - 可选的有:primary、danger、warning等等
          - 写了之后会自动转换为btn-primary(蓝色)、btn-danger(红色)、btn-warning(黄色)等格式,所以前面不要再加"btn-",默认为btn-default(白色)
          - 参考菜鸟教程:Bootstrap 按钮
    iconsdata-iconsObject{ paginationSwitchDown: 'glyphicon-collapse-down icon-chevron-down',
    paginationSwitchUp: 'glyphicon-collapse-up icon-chevron-up',
    refresh: 'glyphicon-refresh icon-refresh',
    toggle: 'glyphicon-list-alt icon-list-alt',
    columns: 'glyphicon-th icon-th',
    detailOpen: 'glyphicon-plus icon-plus',
    detailClose: 'glyphicon-minus icon-minus'
    }
    定义在工具栏、分页、详细视图中使用的图标
          - 没办法解释,请参考菜鸟教程的图标:Bootstrap 字体图标
    columns-Array[]默认空数组,在JS里面定义,field即data-field,title就是每列表头名等等。
          - 请参考:查Bootstrap-table的Usage
    data-Array[]被加载的数据。
          - 也就是从服务器获取的数据,通过"."运算符获取,例如"data.date/data.anything",后面是服务器发来的字段名
    dataFielddata-data-fieldStringrows      - 名称写自己定义的每列的字段名,也就是key,通过key才能给某行的某列赋value。
          - 原文:获取每行数据json内的key
          - 例如:{"name":"zz","age":20},name和age就是key,如果这是从服务端请求的json,那可能和每列定义的字段不同,但都是唯一的
    ajaxdata-ajaxFunctionundefined      - ajax方法,和jQuery的ajax方法类似
          - 参考 BootstrapTable实现定时刷新数据,只是参考,因为那是jQuery的ajax方法
    methoddata-methodStringget向服务器请求远程数据的方式,默认为'get',可选'post'
    urldata-urlStringundefined向服务器请求的url。
          - 例如:server + "get_app_player"和server + 'get_channel_list',两者都是向server(server是自己定义的,例如"http://kanshakan.nichousha.com/")请求数据,只是接口不同,一个是请求该游戏玩家信息,一个是请求渠道信息
    下面看看原文:
          - 向远程站点请求数据的URL
          - 请记住,如果服务端分页选项使用了自定义的,那么请求的服务器响应格式是不同的,参考下面两个数据格式:
          Without server-side pagination(没有启用服务端分页 - data1.json)
          With server-side pagination(启用服务端分页 - data2.json)
    cachedata-cacheBoolean true 默认缓存ajax请求,设为false则禁用缓存
    contentTypedata-content-typeString application/json请求数据的contentType(内容类型),用于定义文件的类型,决定接收方以什么形式读取这个文件。
          - 默认application/json,用来告诉接收端从服务器发来的消息是序列化后的json字符串
    dataTypedata-data-typeStringjson期望从服务器获取的数据的类型,默认为json格式字符串
    ajaxOptionsdata-ajax-optionsObject{}向服务器请求ajax时的附加项,默认无附加
          - 参考 jQuery.ajax()
    queryParamsdata-query-paramsFunction
    function(params){
    return params;}
    当请求数据时,你可以通过修改queryParams向服务器发送其余的参数。
          - queryParamsType="limit",它的参数包括:limit,offset,search,sort,order Else
          - params包括:pageSize,pageNumber,searchText,sortName,sortOrder
          - 当return false,请求则终止
    queryParamsTypedata-query-params-typeStringlimit默认"limit",设置该属性用来发送符合RESTful格式的参数
    responseHandlerdata-response-handlerFunction
    function(res){
    return res;}
    在加载服务器发送来的数据之前,处理数据的格式,参数res表示the response data(获取的数据)
    paginationdata-paginationBooleanfalse默认为false,表格的底部工具栏不会显示分页条(pagination toolbar),可以设为true来显示
    paginationLoopdata-pagination-loopBooleantrue默认true,分页条无限循环
    onlyInfoPaginationdata-only-info-paginationBooleanfalse前提:pagination设为true,启用了分页功能。
          - 默认false,设为true显示总记录数
    sidePaginationdata-side-paginationStringclient设置在哪进行分页,默认"client",可选"server",如果设置 "server",则必须设置url或者重写ajax方法
          - 请记住,如果服务端分页选项使用了自定义的,那么请求的服务器响应格式是不同的,参考下面两个数据格式:
          Without server-side pagination(没有启用服务端分页)
          With server-side pagination(启用服务端分页)
    pageNumberdata-page-numberNumber1前提:pagination设为true,启用了分页功能。
          - 默认第1页,用于设置初始的页数
    pageSizedata-page-sizeNumber10前提:pagination设为true,启用了分页功能。
          - 默认每页显示10条记录,用于设置每页初始显示的条数
    pageListdata-page-listArray[10, 25, 50, 100]前提:pagination设为true,启用了分页功能。
          - 默认为[10, 25, 50, 100],即可以选择"每页显示10/25/50/100条记录",用于设置选择每页显示的条数
    selectItemNamedata-select-item-nameStringbtSelectItemradio(单选按钮)或checkbox(复选框)的字段名
    smartDisplaydata-smart-displayBooleantrue默认为true,会 机智地(<_<) 根据情况显示分页(pagination)或卡片视图(card view)
    escapedata-escapeBooleanfalse 跳过插入HTML中的字符串,替换掉特殊字符(后面符号没有逗号):&,<,>,",`,'
    searchdata-searchBooleanfalse默认false不显示表格右上方搜索框 ,可设为true,在搜索框内只要输入内容即开始搜索
    searchOnEnterKeydata-search-on-enter-keyBooleanfalse默认false不启用,设为true启用,比功能是与上面相比,在搜索框内输入内容并且按下回车键才开始搜索
    strictSearchdata-strict-searchBooleanfalse设为true,开启精确搜索
    searchTextdata-search-textString""前提:search设为true,启用了搜索功能。
          - 搜索框初始显示的内容,默认空字符串
    searchTimeOutdata-search-time-outNumber500前提:search设为true,启用了搜索功能。
          - 设置搜索文件的超时时间(原文:Set timeout for search fire,不知道是写错了还是我知识面太窄,"search fire"是什么意思,官方API错了?给我整蒙逼了)
    trimOnSearchdata-trim-on-searchBooleantrue默认true,自动忽略空格
    showHeaderdata-show-headerBooleantrue默认为true显示表头,设为false隐藏
    showFooterdata-show-footerBooleanfalse默认为false隐藏表尾,设为true显示
    showColumnsdata-show-columnsBooleanfalse默认为false隐藏某列下拉菜单,设为true显示
    showRefreshdata-show-refreshBooleanfalse默认为false隐藏刷新按钮,设为true显示
    showToggledata-show-toggleBooleanfalse默认为false隐藏视图切换按钮,设为true显示

    新版的CSDN有bug,所以其余的Table options另写一个表格 [ Bootstrap Table API 中文版(完整翻译文档) ]

    名称属性类型默认值作用描述
    showPaginationSwitchdata-show-pagination-switchBooleanfalse默认为false隐藏每页数据条数选择,设为true显示
    minimumCountColumnsdata-minimum-count-columnsNumber1每列的下拉菜单最小数
    idFielddata-id-fieldStringundefined表明哪个是字段是标识字段
    uniqueIddata-unique-idStringundefined表明每行唯 一的标识符
    cardViewdata-card-viewBooleanfalse默认false,设为true显示card view(卡片视图)
    detailViewdata-detail-viewBooleanfalse默认false,设为true显示detail view(细节视图)
    detailFormatterdata-detail-formatterFunctionfunction(index, row, element){
    return '';}
    前提:detailView设为true,启用了显示detail view。
          - 用于格式化细节视图
          - 返回一个字符串,通过第三个参数element直接添加到细节视图的cell(某一格)中,其中,element为目标cell的jQuery element
    searchAligndata-search-alignStringright搜索框的位置,默认right(最右),可选left
    buttonsAligndata-buttons-alignStringright工具栏按钮的位置,默认right(最右),可选left
    toolbarAligndata-toolbar-alignStringleft自定义工具栏的位置,默认right(最右),可选left
    paginationVAligndata-pagination-v-alignStringbottom分页条垂直方向的位置,默认bottom(底部),可选top、both(顶部和底部均有分页条)
    paginationHAligndata-pagination-h-alignStringright分页条水平方向的位置,默认right(最右),可选left
    paginationDetailHAligndata-pagination-detail-h-alignStringleft如果解译的话太长,举个例子,paginationDetail就是“显示第 1 到第 8 条记录,总共 15 条记录 每页显示 8 条记录”,默认left(最左),可选right
    paginationPreTextdata-pagination-pre-textString还是举例子,如果你内容太多,底部最右边会显示:"‹ 1 2 3 4 5 ›"来选择页数,默认就是最左边那个符号,下同
    paginationNextTextdata-pagination-next-textString参考上面一条
    clickToSelectdata-click-to-selectBooleanfalse默认false不响应,设为true则当点击此行的某处时,会自动选中此行的checkbox(复选框)或radiobox(单选按钮)
    singleSelectdata-single-selectBooleanfalse默认false,设为true则允许复选框仅选择一行
    toolbardata-toolbarString | NodeundefinedjQuery的选择器,例如:#toolbar,.toolbar,或者是DOM 结点
    checkboxHeaderdata-checkbox-headerBooleantrue如果你有声明复选框,默认显示表头行的全选复选框,设为false隐藏(就是表格第一行的不显示,从第二行往后都显示)
    maintainSelecteddata-maintain-selectedBooleanfalse设为true则保持被选的那一行的状态
    sortabledata-sortableBooleantrue默认true,设为false禁用所有的行排列(也就是每列表头不会显示排序的按钮,这个需要在th声明data-sortable="true",写在js中只是启不启用)
    slientSortdata-silent-sortBooleantrue前提:sidePagination设为server(服务端)
          - 默认true,设为false则静默排序数据
    rowStyledata-row-styleFunction{}改变某行的格式,需要两个参数:
          - row:此行的数据
          - index:此行的索引
    支持classes和css,用法如下: function rowStyle(row, index){
        return { classes: 'text-nowrap another-class',
    css: {"color": "blue", "font-size": "50px"}
    }; }
    rowAttributesdata-row-attributesFunction{}改变某行的属性,需要两个参数:
          - row:此行的数据
          - index:此行的索引
    支持所有自定义的属性。
    customSearchdata-custom-searchFunction$.noop自定义搜索功能(用来代替自带的搜索功能),需要一个参数:
          - text:想要搜索的内容
    用法如下:
    function customSearch(text){
         //必须使用'this.data'对数据进行过滤(filter the data,感觉这个词也不用译),不要使用'this.options.data' }
    customSortdata-custom-sortFunction$.noop自定义排序功能(用来代替自带的排序功能),需要两个参数(可以参考前面):
          - sortName:需要排序的那列
          - sortOrder:排序方式
    用法:和上面一样,不用担心,注释也一模一样
    localedata-localeStringundefined本地化(动词)。
    本地化的文件必须被预加载,允许fallback(简单来说就是如果要使用的文件不可用,就可以用别的替代它,例如球场替补,没替补,如果有人受伤了,比赛不就废了),如果加载,将按如下顺序:
          - 首先尝试加载的是指定的"本地化"文件
          - 然后是'_'(下划线)写成'-'(破折号),并且区域代码被大写的
          - 然后是短区域代码(例如:用'fr'代替'fr-CA')
          - 最后使用的是剩下的本地化文件(当没有文件可加载则使用默认的)
    如果剩余的undefined,或者是空字符,则使用最后一次使用的那个文件(当没有本地化文件可被加载,则使用自带的'en_US')
    footerStyledata-footer-styleFunction{}改变footer格式,需要两个参数:
          - row:此行的数据
          - index:此行的索引
    支持classes和css,用法如下:
    function rowStyle(value,row, index){
        return { css: { "font-weight": "bold" } }; }

    列的各项(Column options )

    定义在 jQuery.fn.bootstrapTable.columnDefaults 文件内

    名称属性类型默认值作用描述
    radiodata-radioBooleanfalse默认false不显示radio(单选按钮),设为true则显示,radio宽度是固定的
    checkboxdata-checkboxBooleanfalse默认false不显示checkbox(复选框),设为true则显示,checkbox的每列宽度已固定
    fielddata-fieldStringundefined是每列的字段名,不是表头所显示的名字,通过这个字段名可以给其赋值,相当于key,表内唯一
    titledata-titleStringundefined这个是表头所显示的名字,不唯一,如果你喜欢,可以把所有表头都设为相同的名字
    titleTooltipdata-title-tooltipStringundefined当悬浮在某控件上,出现提示
           - 参考 Bootstrap 提示工具(Tooltip)插件
    classclass/data-classStringundefined没什么好说的,就是class
    rowspanrowspan/data-rowspanNumberundefined每格所占的行数
    colspancolspan/data-colspanNumberundefined每格所占的列数
    aligndata-alignStringundefined每格内数据的对齐方式,有:left(靠左)、right(靠右)、center(居中)
    haligndata-halignStringundefinedtable header(表头)的对齐方式,有:left(靠左)、right(靠右)、center(居中)
    faligndata-falignStringundefinedtable footer(表脚,就这样译,任性,其实随便译啦,知道就好)的对齐方式,有:left(靠左)、right(靠右)、center(居中)
    valigndata-valignStringundefined每格数据的对齐方式,有:top(靠上)、middle(居中)、bottom(靠下)
    widthdata-widthNumber(单位:px或%)undefined每列的宽度。
           - 如果没有自定义宽度,那么宽度会根据内容的宽度自适应。
           - 如果表是左适应(left responsive)或者设置的宽度小于内容的宽度,那么,宽度还是会自适应(可以在class或其他的属性中使用 min-width 或 max-width)。
           - 你也可以使用"%"作为单位,这样的话,bootstapTable将按百分比划分,如果你想使用"pixels(像素值)",你可以只写数字(只要不加"%",单位默认"px",不嫌麻烦,或者想更清晰,你也可以加上"px")
    sortabledata-sortableBooleanfalse默认false就默认显示,设为true则会被排序
    orderdata-orderStringasc默认的排序方式为"asc(升序)",也可以设为"desc(降序)"。
           - 与上面的结合使用,不然都不让排序了,你还考虑什么升降。
    visibledata-visibleBooleantrue默认为true显示该列,设为false则隐藏该列。
           - 还是很有用的,例如隐藏自定义index列,按某属性排序后会变乱,你可以读取某行的index来进行赋值
    cardVisibledata-card-visibleBooleantrue默认为true显示该列,设为false则隐藏。
    switchabledata-switchableBooleantrue默认为true显示该列,设为false则禁用列项目的选项卡。
    clickToSelectdata-click-to-selectBooleantrue默认true不响应,设为false则当点击此行的某处时,不会自动选中此行的checkbox(复选框)或radiobox(单选按钮)
    formatterdata-formatterFunctionundefined 需要此列的对象。
           某格的数据转换函数,需要三个参数:
             -value: field(字段名)
             -row:行的数据
             -index:行的(索引)index
    footerFormatterdata-footer-formatterFunctionundefined需要此列的对象。
           某格的数据转换函数,需要一个参数:
             -data: 所有行数据的数组
           函数需要返回(return)footer某格内所要显示的字符串的格式,还要包括内容
    eventsdata-eventsObjectundefined当某格使用formatter函数时,事件监听会响应,需要四个参数:
             -event:jQuery事件(参考Events)。
             - value:字段名
             - row:行数据
             - index:此行的index
    举个例子:
         <th .. data-events="operateEvent"> var operateEvents = {'click .like': function (e, value, row, index) {}};
    sorterdata-sorterFunctionundefined自定义的排序函数,实现本地排序,需要两个参数:
             - a:第一个字段名
             - b:第二个字段名
    sortNamedata-sort-nameStringundefined除了表头默认的sort-name或列的字段名,还可以使用自定义的sort-name
           对特殊情况说明:
             - 一个列显示的内容或许是"html"代码,如:<b><span style="color:red">abc</span></b>,但是被排列的是html代码中的内容(content):abc
    cellStyledata-cell-styleFunctionundefined对某格中显示样式(style)进行改变,需要三个函数:
             - value:字段名
             - row:行数据
             - index:此行的index
             - field:行的字段名
    支持classes和css,用法如下:
         function cellStyle(value, row, index, field) { return { classes: 'text-nowrap another-class', css: {"color": "blue", "font-size": "50px"} }; }
    searchable data-searchableBooleantrue默认true,表示此列数据可被查询
    searchFormatterdata-search-formatterBooleantrue默认true,可使用格式化的数据查询
    escapedata-escapeBooleanfalse 跳过插入HTML中的字符串,替换掉特殊字符(后面符号没有逗号):&,<,>,",`,'

    事件(Events)

    定义事件的格式:

    $(’#table’).bootstrapTable({
    onEventName: function (arg1, arg2, …) {
    // …
    } });

    $(’#table’).on(‘event-name.bs.table’, function (e, arg1, arg2, …) {
    // …
    });


    事件名定义在jQuery中的事件名参数作用描述
    onAllall.bs.tablename, args当所有触发器被触发时都执行此函数,就是所有的事件都会触发该事件,参数包括:
             - name:事件名
             - args:事件的数据
    onClickRowclick-row.bs.tablerow, $element, field当单击此行的任意一处,就会触发该事件,所需参数如下(只是按原文译过来的,在bootstraptable的js中不需要这些参数,因为单击该行就会获得一个row,row中包括此行所有数据,只要通过此行某列的字段名即可取出):
             - row:哪一行(从0开始)
             - $element:该行(tr)
             - field:当点击该行,你想获取此行哪一格的数据,field就是此列字段名
             - 参考:Bootstrap Table 双击或单击行获取该行内容
    onDblClickRowdbl-click-row.bs.tablerow, $element, field和上面差不多,当双击(666)此行的任意一处,就会触发该事件,所需参数如下(只是按原文译过来的,在bootstraptable的js中不需要这些参数,因为双击该行就会获得一个row,row中包括此行所有数据,只要通过此行某列的字段名即可取出):
             - row:哪一行(从0开始)
             - $element:该行(tr)
             - field:当点击该行,你想获取此行哪一格的数据,field就是此列字段名
             - 参考:Bootstrap Table 双击或单击行获取该行内容
    onClickCellclick-cell.bs.tablefield, value, row, $element当单击某一格,就会触发该事件,所需参数如下:
             - field:此格所在列的字段名
             - value:此格的数据
             - $element:此行的此列,就是此格(td)
    onDblClickCelldbl-click-cell.bs.table field, value, row, $element当双击某一格,就会触发该事件,所需参数如下:
             - field:此格所在列的字段名
             - value:此格的数据
             - $element:此行的此列,就是此格(td)
    onSortsort.bs.tablename, order当对某列进行排序时触发该事件,所需参数如下:
             - name:所排序的列的字段名
             - order:所排的顺序
    onCheckcheck.bs.tablerow, $element当选择(check)此行时触发,所需的参数如下:
             - row:所选择的行的字段名
             - $element:此行的DOM元素
    onUncheckuncheck.bs.tablerow, $element当取消选择(uncheck)此行时触发,所需的参数如下:
             - row:所取消选择的行的字段名
             - $element:此行的DOM元素
    onCheckAllcheck-all.bs.tablerows当全选行时触发,所需的参数如下:
             - rows:最近(newly)所选择的行的字段名的数组
    onUncheckAlluncheck-all.bs.tablerows当取消全选行时触发,所需的参数如下:
             - rows:之前或上次(previously)所选择的行的字段名的数组
    onCheckSome check-some.bs.tablerows当选择(check)某些行(多行,rows)时触发,所需的参数如下:
             - rows:之前或上次(previously)所选择的行的字段名的数组
    onUncheckSomeuncheck-some.bs.tablerows当取消选择(uncheck)某些行(多行,rows)时触发,所需的参数如下:
             - rows:之前或上次(previously)所选择的行的字段名的数组
    onLoadSuccess load-success.bs.tabledata当所有数据被加载时触发
    onLoadErrorload-error.bs.tablestatus, res当加载某些数据出现错误时触发
    onColumnSwitchcolumn-switch.bs.tablefield, checked当某列改变是否可见的状态时触发
    onColumnSearchcolumn-search.bs.tablefield, text当某列被查询时触发
    onPageChangepage-change.bs.tablenumber, size当改变此页所显示的数据条数或改变页码时触发
    onSearchsearch.bs.tabletext当查询此表时触发
    onToggletoggle.bs.tablecardView当改变表的视图时触发
    onPreBodypre-body.bs.tabledata当<tbody></tbody>中的内容没显示前触发
    onPostBodypost-body.bs.tabledata当<tbody></tbody>中的内容被加载完后或者在你所用的DOM中有定义则被触发
    onPostHeaderpost-header.bs.tablenone当<thead></thead>中的内容被加载完后或者在你所用的DOM中有定义则被触发
    onExpandRowexpand-row.bs.tableindex, row, $detail当查看详细视图(点击查看detail的图标)时触发
    onCollapseRowcollapse-row.bs.tableindex, row当关闭详细视图(再次点击查看detail的图标)时触发
    onRefreshOptionsrefresh-options.bs.tableoptions当刷新各项后或在初始化表(也包括销毁了再初始化)之前触发
    onResetViewreset-view.bs.table当重置(reset)表的视图时触发
    onRefresh refresh.bs.tableparams当点击刷新按钮(refresh,不是浏览器的,而是表格右上角的刷新按钮)后触发

    方法(Methods)

    定义方法响应的语法 $('#table').bootstrapTable('method', parameter);

    方法名参数描述举例
    getOptionsnone返回各项的object$table.bootstrapTable('getOptions');
          - 请查看: getOptions
    getSelectionsnone返回被选择的行,当没有行被选择,则返回空数组(但并不是undefined,也不是null,是长度为0的空数组,所以可以判断长度是否大于0来确定是否选择了行)$table.bootstrapTable('getSelections');
          - 请查看: getSelections
    getAllSelectionsnone返回所有被选的行(原文中:contain search or filter,其实就是你选择的筛选之后的数据),当没有行被选择,则返回空数组$table.bootstrapTable('getAllSelections');
          - 请查看: getAllSelections
    showAllColumnsnone显示所有的列$table.bootstrapTable('showAllColumns');
          - 就是显示所有的列,并没什么可说的
    hideAllColumnsnone隐藏所有的列$table.bootstrapTable('hideAllColumns');
          - 就是隐藏所有的列
    getDatauseCurrentPage获取被加载的表的数据,如果你设置了使用当前页的数据(useCurrentPage),则返回当前页的数据$table.bootstrapTable('getData');
          - 请查看: getData
    getRowByUniqueIdid获取你想要的某行的数据(设置某行的id)$table.bootstrapTable('getRowByUniqueId', 1);后面的1就是你要的那一行的ID
          - 请查看: getRowByUniqueId
    loaddata向表中加载数据,原来的数据将被移除$table.bootstrapTable('load', data);
          - 请查看: load

    新版的CSDN有bug,所以其余的Methods另写一个表格 [ Bootstrap Table API 中文版(完整翻译文档)]

    方法名参数描述举例
    appenddata将数据追加在最后一行后$table.bootstrapTable('append', data);data可以是数组
          - 请查看: append
    prependdata也是追加,只是在第一行之前$table.bootstrapTable('prepend', data);data可以是数组
          - 请查看: prepend
    removeparams移除一行或多行你所选的数据$table.bootstrapTable('remove', {field: 'id', values: ids});
          - id:所需移除的那一行(rows,一或多行)的字段
          - values:被移除的行的数组
          - 请查看: remove
    removeAll-移除表中所有的数据$table.bootstrapTable('removeAll');
          - 请查看: removeAll
    removeByUniqueId-移除某行数据(设置某行的id)$table.bootstrapTable('removeByUniqueId', 1);后面的1就是你想移除的那一行的ID
          - 请查看: removeByUniqueId
    insertRowparams新增一行,所需的参数如下:
          - index:你想插入到哪(只要愿意,想插哪就插哪,想插谁就插谁)
          - row:你想插入的数据
    $table.bootstrapTable('insertRow', {index: 1, row: row});
          - 请查看: insertRow
    updateRowparams更新行数据,所需的参数如下:
          - index:所要更新的行的索引(index)
          - row:你想换的新的数据
    $table.bootstrapTable('updateRow', {index: 1, row: row});
          - 请查看: updateRow
          - 请查看: Bootstrap Table实现定时刷新数据
    updateByUniqueIdparams更新某行数据,所需的参数如下:
          - id:你想更新那行的id(唯一),(只要愿意,想换哪个换哪个)
          - row:你想换的新的数据
    $table.bootstrapTable('updateByUniqueId', {id: 3, row: row});
          - 请查看: updateByUniqueId
    showRowparams显示特定行,所需的参数至少包括下面所列的一个:
          - id:所要显示的行的索引(index)
          - uniqueId:那一行的id
    $table.bootstrapTable('showRow', {index:1});
          - 请查看: showRow/hideRow
    hideRowparams隐藏特定行,所需的参数至少包括下面所列的一个:
          - id:所要隐藏的行的索引(index)
          - uniqueId:那一行的id
    $table.bootstrapTable('hideRow', {index:1});
          - 请查看: showRow/hideRow
    getRowsHiddenboolean获取隐藏的行(官方原话很多,其实总结起来就前面那一句)$table.bootstrapTable('getRowsHidden');

    新版的CSDN有bug,所以其余的Methods另写一个表格 [ Bootstrap Table API 中文版(完整翻译文档) ]

    方法名参数描述举例
    mergeCellsoptions融合~(把多格合并为一格),所需的参数如下:
          - index:所要合并的格所在行的索引(index)
          - field:所在列的字段名
          - rowspan:合并的行总数目
          - colspan:合并的列总数目
    $table.bootstrapTable('mergeCells', {index: 1, field: 'name', colspan: 2, rowspan: 3});
          - 请查看: mergeCells
    updateCellparams更新某格数据,所需的参数如下:
          - index:所要合并的格所在行的索引(index)
          - field:所在列的字段名
          - value:要换的新的数据
    你也可以设置{reinit:false}来禁用表格的再次初始化
    $table.bootstrapTable('updateCell',{index:index,field:'id',value:value});
    refreshparams刷新服务端的数据:
          - 可以设置{silent:true}来 偷偷地(<_<) 刷新
          - 设置{url:newUrl,pageNumber:pageNumber,
    pageSize:pageSize}改变请求的地址,页数,每页所显示的条数
          - 可以设置{query:{foo:'bar'}}增加特定的参数
    $table.bootstrapTable('refresh');
          - 请查看: refresh
    refreshOptionsoptions看例子吧      - 请查看: refreshOptions
    resetSearchtext重置搜索的文本(text)      - 请查看: resetSearch
    showLoadingnone显示正在加载……      - 请查看: showLoading/hideLoading
    hideLoadingnone隐藏正在加载……      - 请查看: showLoading/hideLoading
    checkAllnone选择当前页的所有行$table.bootstrapTable('checkAll');
          - 请查看: checkAll/uncheckAll
    uncheckAllnone取消选择当前页的所有行$table.bootstrapTable('uncheckAll');
          - 请查看: checkAll/uncheckAll
    checkInvertnone反向选择,不难理解吧$table.bootstrapTable('checkInvert');
    checkindex选择某一行,索引(index)从0开始$table.bootstrapTable('check', 1);
          - 请查看: check/uncheck
    uncheckindex取消选择某一行,索引(index)从0开始$table.bootstrapTable('uncheck', 1);
          - 请查看: check/uncheck
    checkByparams通过数组选择某一行,所需的参数如下:
          - field:所要选的字段名
          - values:所要选的那些值(数组)
    官方没,啊,有例纸:
    - $("#table").bootstrapTable("checkBy", { field:"field_name", values:["value1","value2","value3"]});
          - 请查看: checkBy/uncheckBy
    uncheckByparams通过数组选择某一行,所需的参数如下:
          - field:所要取消选择的字段名
          - values:所要取消选择的那些值(数组)
    $("#table").bootstrapTable("uncheckBy", { field:"field_name", values:["value1","value2","value3"]});
          - 请查看: checkBy/uncheckBy
    resetViewparams改变表格的样式,例如改变表格的高度(height) $table.bootstrapTable('resetView');
          - 请查看: resetView
    resetWidthnone自动改变表头和表脚(就译成脚,任性)的宽度来适应每列的宽度$table.bootstrapTable('resetWidth');
    destroynone销毁表格 A!T!T!A!C!K!$table.bootstrapTable('destroy');
          - 请查看: destroy
    showColumnfield显示特定的列 $table.bootstrapTable('showColumn', 'name');
          - 请查看: showColumn/hideCoulumn
    hideColumnfield隐藏特定的列 $table.bootstrapTable('hideColumn', 'name');
          - 请查看: showColumn/hideCoulumn

    新版的CSDN有bug,所以其余的Methods另写一个表格 [ Bootstrap Table API 中文版(完整翻译文档) ]

    方法名参数描述举例
    getHiddenColumns-获取所有隐藏的列$table.bootstrapTable('getHiddenColumns');
    getVisibleColumns-获取所有显示的列$table.bootstrapTable('getVisibleColumns');
    scrollTovalue滚……到哪个位置,单位是'px',如果设为'bottom',嗖,恭喜你已到表尾 $table.bootstrapTable('scrollTo', 0);
          - 请查看: scrollTo
    getScrollPositionnone获取当前所滚到的位置,单位你懂得,就是'px'$table.bootstrapTable('getScrollPosition');
    filterBynone只能在客户端(client-side,相对server-side)这边用,过滤表中的数据
    例如:
          - 可以设置{age:10}来只显示age为10的数据
          - 不仅单的,你还可以双飞,甚至多p,设置{age: 10, hairColor: ["blue", "red", "green"]} ,这样你就得到了一群10岁的,头发颜色为蓝,红,绿的……数据
    $table.bootstrapTable('filterBy', { id: [1, 2, 3] });
          - 请查看: filterBy
    selectPagepage跳转到特定的页面$table.bootstrapTable('selectPage', 1);
          - 请查看: selectPage/prevPage/nextPage
    prevPagenone跳转到上一页$table.bootstrapTable('prevPage');
          - 请查看: selectPage/prevPage/nextPage
    nextPagenone跳转到下一页$table.bootstrapTable('nextPage');
          - 请查看: selectPage/prevPage/nextPage
    togglePaginationnone词穷,请看例纸$table.bootstrapTable('togglePagination');
          - 请查看: togglePagination
    toggleViewnone改变视图$table.bootstrapTable('toggleView');
          - 请查看: toggleView
    expandRowindex可使用条件:detail view设为了true,不然无法使用视图功能,这个也没用
          - 通过参数index来展开此列的详细视图
          - 请查看: expandRow-collapseRow
    collapseRowindex可使用条件:detail view设为了true
          - 通过参数index来关闭此列的详细视图
          - 请查看: expandRow-collapseRow
    expandAllRows
    新版有更改(原来为"expandAllRow"),下同
    感谢 @zhq449681061
    is subtable可使用条件:detail view设为了true
          - 展开所有列的详细视图
    $table.bootstrapTable('expandAllRows');
          - 参考上面的实例,上面是展开(折叠)某一行的视图,这个是所有行的
    collapseAllRowsis subtable可使用条件:detail view设为了true
          - 关闭所有列的详细视图
    $table.bootstrapTable('collapseAllRows');
          - 参考上面

    本地化,切换为另一种语言(Localizations)

    默认显示英文,如果想使用中文,首先引入:

    <script src="bootstrap-table-zh-CN.js"></script>

    然后是三种声明使用的方法(个人只使用第二、三种),如下:

    • 第一种:

    $.extend($.fn.bootstrapTable.defaults, $.fn.bootstrapTable.locales['zh-CN']);

    • 第二种:

    <table data-toggle="table" data-locale="zh-CN"></table>

    • 第三种:

    $('table').bootstrapTable({locale:'zh-CN'});


    • 以下说明除了数字外均为中文默认显示,本来不用写的,只要引入就显示中文了,下面数字我就默认15,这个实际要看你设置的是多少
    名称参数默认说明
    formatLoadingMessage-'Loading, please wait…'“加载中,请等待……”
    formatRecordsPerPagepageNumber'%s records per page'“每页显示 15 条记录”
    formatShowingRowspageFrom, pageTo, totalRows'Showing %s to %s of %s rows'“显示第 1 到第 15 条记录”
    formatDetailPaginationtotalRows'Showing %s rows'“总共 15 条记录”
    formatSearch-'Search'“搜索”(占位符)
    formatNoMatches-'No matching records found'“没有找到匹配的记录”
    formatRefresh-'Refresh'“刷新”(鼠标悬浮显示的文字,下同)
    formatToggle-'Toggle'“切换”
    formatColumns-'Columns'“列”

    有错请留言,看到后会及时更改,如果像那种翻译的行写成列或漏字等低级错误,看英文名称就知道有没有错了,主要就是为了让你们知道怎么用,会持续检查哪有误、漏译,如果认为有译得不妥的地方,也可以留言一起讨论,谢谢


    自己做的微信小程序工具 —维尼聚合工具( 查地铁、线路规划、二维码生成、计算器、指南针、证件识别等等)

    维尼聚合工具


    其他相关:


    展开全文
  • Bootstrap Table

    万次阅读 热门讨论 2016-10-18 11:04:48
    Bootstrap Table是基于 Bootstrap 的 jQuery 表格插件,通过简单的设置,就可以拥有强大的单选、多选、排序、分页,以及编辑、导出、过滤(扩展)等等的功能。 http://bootstrap-table.wenzhixin.net.cn/zh-cn/使用...

    Bootstrap Table是基于 Bootstrap 的 jQuery 表格插件,通过简单的设置,就可以拥有强大的单选、多选、排序、分页,以及编辑、导出、过滤(扩展)等等的功能。 http://bootstrap-table.wenzhixin.net.cn/zh-cn/

    使用:

    ①.引入需要的JS和CSS

    <link rel="stylesheet" href="${basePath}/css/bootstrap..css">
    <link rel="stylesheet" href="${basePath}/css/bootstrap-table/bootstrap-table.css">
    
    <script src="${basePath}/js/jquery.min.js"></script>
    <script src="${basePath}/js/bootstrap.min.js"></script>
    <script src="${basePath}/js/plugins/bootstrap-table/bootstrap-table.min.js"></script>
    <script src="${basePath}/js/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>
    <script src="${basePath}/js/plugins/bootstrap-table/bootstrap-table-export.js"></script>
    <script src="${basePath}/js/plugins/bootstrap-table/tableExport.js"></script>

    ②.定义一个空的table

    <body>
        <div class="row base-margin" id="query">
            <ol class="breadcrumb">
                <li><strong><span style="color: #27a0d7">用户列表</span></strong></li>
            </ol>
            <form class="form-inline" role="form" style="float: left; width: 100%" method="post" id="queryForm">
                <div class="form-group">
                    <label for="orgCode">部门:</label> 
                    <select class="form-control" id="orgCode" name="orgCode">   
                        <option value="">默认选择</option>
                        <c:forEach var="data" items="${orgList}">
                            <option value="${data.orgCode }">${data.orgName }</option>
                        </c:forEach>
                    </select>
                </div>
                <div class="form-group">
                    <label for="userName">名称:</label> 
                    <input type="text" class="form-control" name="userName" id="userName"  placeholder="请输入名称">
                </div>
                <div class="form-group">
                    <label >日期:</label>
                    <input placeholder="开始日期" class="form-control layer-date" id="startDate" name="startDate">
                    <input placeholder="结束日期" class="form-control layer-date" id="endDate" name="endDate">
                </div>
                <div class="form-group">
                    <button type="button" id="queryBtn" onclick="doQuery();" class="btn btn-primary">查询</button>
                </div>
                <div class="form-group btn-right">
                    <button type="button" class="btn btn-primary" id="addBtn" onclick="addUser();">新增用户</button>
                </div>
            </form>
        </div>
        <div class="container" style="width: 100%">
            <table id="demo-table">
            </table>
        </div>
    </body>

    ③.初始化table表格(建议把初始化的JS代码写到另外的自定义js页面中,代码还挺长的),具体的各个参数可以查看API。

    <script type="text/javascript">
    $(function () {
        initTable();
        initDate();
    });
    
    function doQuery(params){
        $('#demo-table').bootstrapTable('refresh');    //刷新表格
    }
    
    function initTable(){
        var url = "user.do?method=listUsers&random="+Math.random();
        $('#demo-table').bootstrapTable({
            method:'POST',
            dataType:'json',
            contentType: "application/x-www-form-urlencoded",
            cache: false,
            striped: true,                              //是否显示行间隔色
            sidePagination: "server",           //分页方式:client客户端分页,server服务端分页(*)
            url:url,
            height: $(window).height() - 110,
            width:$(window).width(),
            showColumns:true,
            pagination:true,
            queryParams : queryParams,
            minimumCountColumns:2,
            pageNumber:1,                       //初始化加载第一页,默认第一页
                   pageSize: 20,                       //每页的记录行数(*)
                  pageList: [10, 25, 50, 100],        //可供选择的每页的行数(*)
                  uniqueId: "id",                     //每一行的唯一标识,一般为主键列
            showExport: true,                    
            exportDataType: 'all',
            responseHandler: responseHandler,
            columns: [
            {
                field: '',
                        title: 'Sort No.',
                        formatter: function (value, row, index) {
                        return index+1;
                 }
            },
            {
                field : 'id',
                title : 'User ID',
                align : 'center',
                valign : 'middle',
                sortable : true
            }, {
                field : 'institutionCode',
                title : 'Institution Code',
                align : 'center',
                valign : 'middle',
                sortable : true
            }, {
                field : 'institutionName',
                title : 'Institution Name',
                align : 'center',
                valign : 'middle'
            }, {
                field : 'loginId',
                title : 'Login Name',
                align : 'center',
                valign : 'middle',
                sortable : true
            }, {
                field : 'realName',
                title : 'Real Name',
                align : 'center',
                valign : 'middle'
            }, {
                field : 'createTime',
                title : 'Create Time',
                align : 'center',
                valign : 'left',
                formatter : function (value, row, index){
                    return new Date(value).format('yyyy-MM-dd hh:mm:ss');
                }
            }, {
                field : 'homeAddress',
                title : 'Address',
                align : 'center',
                valign : 'middle'
            }]
        });
    }
    
    function initDate(){
        var start = {
                elem: '#startDate',
                format: 'YYYY-MM-DD hh:mm:ss',
                min: laydate.now(-7),       
                max: laydate.now(),
                istime: true,
                istoday: false,
                choose: function (datas) {
                    end.min = datas; //开始日选好后,重置结束日的最小日期
                    end.start = datas //将结束日的初始值设定为开始日
                }
            };
            var end = {
                elem: '#endDate',
                format: 'YYYY-MM-DD hh:mm:ss',
                min: laydate.now(-7),       
                max: laydate.now(),
                istime: true, //是否开启时间选择
                isclear: true, //是否显示清空
                istoday: true, //是否显示今天
                issure: true, //是否显示确认
                choose: function (datas) {
                    start.max = datas; //结束日选好后,重置开始日的最大日期
                }
            };
            laydate(start);
            laydate(end);
    }
    
    function queryParams(params) {
        var param = {
            orgCode : $("#orgCode").val(),
            userName : $("#userName").val(),
            startDate : $("#startDate").val(),
            endDate : $("#endDate").val(),
            limit : this.limit, // 页面大小
            offset : this.offset, // 页码
            pageindex : this.pageNumber,
            pageSize : this.pageSize
        }
        return param;
    } 
    
    // 用于server 分页,表格数据量太大的话 不想一次查询所有数据,可以使用server分页查询,数据量小的话可以直接把sidePagination: "server"  改为 sidePagination: "client" ,同时去掉responseHandler: responseHandler就可以了,
    function responseHandler(res) { 
        if (res) {
            return {
                "rows" : res.result,
                "total" : res.totalCount
            };
        } else {
            return {
                "rows" : [],
                "total" : 0
            };
        }
    }
    </script>

    ④. Controller(后台用的是Spring框架)

        @ResponseBody
        @RequestMapping(params = "method=listUsers")
        public Object listUsers(UserForm form) {
            int totalCount = userService.getTotalCount(form);
            if(totalCount > 0){
                BasePageResult<User> result = new BasePageResult<User>();
                form.setBeginNum(((form.getPageindex()-1)*form.getPageSize()));
                form.setEndNum((form.getPageindex()*form.getPageSize()));
                List<User> user = userService.getUserList2(form);
                result.setTotalCount(totalCount);
                result.setResult(user);
                return result;
            }
            return null;
        }

    ⑤. 附上最终的表格
    这里写图片描述

    还有就是你们想看后台的,https://github.com/Jstarfish/starfish-demo
    这个是我学shiro的时候写的一个例子,用的就是这个,你们可以跳过shiro部分,只看列表的实现。

    参考: http://www.jb51.net/article/76030.htm

    展开全文
  • bootstrap table

    2019-01-23 17:24:48
    Bootstrap中文网:http://www.bootcss.com/...Bootstrap Table Demo:http://issues.wenzhixin.net.cn/bootstrap-table/index.html Bootstrap Table API:http://bootstrap-table.wenzhixin.net.cn/zh-cn/documenta...
    展开全文
  • bootstraptable

    2018-07-03 17:01:01
    基于 Bootstrap 的 jQuery 表格插件,通过简单的设置,就可以拥有强大的单选、多选、排序、分页,以及编辑、导出、过滤(扩展)等等的功能。
  • Bootstrap table方法,Bootstrap table事件,配置.pdf
  • Bootstrap Tablebootstrap table知识合集

    万次阅读 多人点赞 2018-12-13 22:31:24
    bootstrap table系列: 【Bootstarp Tablebootstrap table基本使用 【Bootstrap Tablebootstrap table:父子表和行列调序 【Bootstrap Tablebootstrap table 常用功能 相关文档和技术网站小结 Bootstrap...

    参考地址:http://www.cnblogs.com/landeanfen/p/4976838.html

    相关文档和技术网站小结

    Bootstrap中文网:http://www.bootcss.com/

    Bootstrap Table Demo:http://issues.wenzhixin.net.cn/bootstrap-table/index.html

    Bootstrap Table API:http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/

    Bootstrap Table API 中文版(完整翻译文档):https://blog.csdn.net/S_clifftop/article/details/77937356?locationNum=3&fps=1

    Bootstrap Table源码:https://github.com/wenzhixin/bootstrap-table

    Bootstrap DataPicker:http://www.bootcss.com/p/bootstrap-datetimepicker/

    Boostrap Table 扩展API:http://bootstrap-table.wenzhixin.net.cn/extensions/

    Bootstrap离线API:https://pan.baidu.com/s/1kTERYsf

    Bootstrap Table 离线API :https://pan.baidu.com/s/1c0G3Fu4
    这里要说明一点:Bootstrap Table的离线API是博主自己在官网上面保存下来的,样式可能存在问题。

    一、基本使用

    1、Bootstrap Table的引入

    Bootstrap的包直接在 http://v3.bootcss.com/ 里面可以找到,版本已经出来4的预览版,但还是建议使用比较稳定的Bootstrap3,目前最新的3.3.5。

    然后就是Bootstrap Table的包了,由于它是开源的,我们直接进到它的源码https://github.com/wenzhixin/bootstrap-table里面git下来就好了。然后把这两个包分别加入到项目中。

    2、在cshtml页面引用相关组件,并定义好一个空的表格。

    <!DOCTYPE html>
    <html>
    <head>
        <meta name="viewport" content="width=device-width" />
        <title>BootStrap Table使用</title>
        @*1、Jquery组件引用*@
        <script src="~/Scripts/jquery-1.10.2.js"></script>
    
        @*2、bootstrap组件引用*@
        <script src="~/Content/bootstrap/bootstrap.js"></script>
        <link href="~/Content/bootstrap/bootstrap.css" rel="stylesheet" />
        
        @*3、bootstrap table组件以及中文包的引用*@
        <script src="~/Content/bootstrap-table/bootstrap-table.js"></script>
        <link href="~/Content/bootstrap-table/bootstrap-table.css" rel="stylesheet" />
        <script src="~/Content/bootstrap-table/locale/bootstrap-table-zh-CN.js"></script>
        
        @*4、页面Js文件的引用*@
        <script src="~/Scripts/Home/Index.js"></script>
    </head>
    <body>
        <div class="panel-body" style="padding-bottom:0px;">
            <div class="panel panel-default">
                <div class="panel-heading">查询条件</div>
                <div class="panel-body">
                    <form id="formSearch" class="form-horizontal">
                        <div class="form-group" style="margin-top:15px">
                            <label class="control-label col-sm-1" for="txt_search_departmentname">部门名称</label>
                            <div class="col-sm-3">
                                <input type="text" class="form-control" id="txt_search_departmentname">
                            </div>
                            <label class="control-label col-sm-1" for="txt_search_statu">状态</label>
                            <div class="col-sm-3">
                                <input type="text" class="form-control" id="txt_search_statu">
                            </div>
                            <div class="col-sm-4" style="text-align:left;">
                                <button type="button" style="margin-left:50px" id="btn_query" class="btn btn-primary">查询</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>       
    
            <div id="toolbar" class="btn-group">
                <button id="btn_add" type="button" class="btn btn-default">
                    <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增
                </button>
                <button id="btn_edit" type="button" class="btn btn-default">
                    <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>修改
                </button>
                <button id="btn_delete" type="button" class="btn btn-default">
                    <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除
                </button>
            </div>
            <table id="tb_departments"></table>
        </div>
    </body>
    </html>
    

    引入需要的文件之后,我们最重要的就是定义一个空的table,如上的 <table id="tb_departments"></table>

    3、Js初始化

    $(function () {
    
        //1.初始化Table
        var oTable = new TableInit();
        oTable.Init();
    
        //2.初始化Button的点击事件
        var oButtonInit = new ButtonInit();
        oButtonInit.Init();
    
    });
    
    
    var TableInit = function () {
        var oTableInit = new Object();
        //初始化Table
        oTableInit.Init = function () {
            $('#tb_departments').bootstrapTable({
                url: '/Home/GetDepartment',         //请求后台的URL(*)
                method: 'get',                      //请求方式(*)
                toolbar: '#toolbar',                //工具按钮用哪个容器
                striped: true,                      //是否显示行间隔色
                cache: false,                       //是否使用缓存,默认为true,所以一般情况下需要设置一下这个属性(*)
                pagination: true,                   //是否显示分页(*)
                sortable: false,                     //是否启用排序
                sortOrder: "asc",                   //排序方式
                queryParams: oTableInit.queryParams,//传递参数(*)
                sidePagination: "server",           //分页方式:client客户端分页,server服务端分页(*)
                pageNumber:1,                       //初始化加载第一页,默认第一页
                pageSize: 10,                       //每页的记录行数(*)
                pageList: [10, 25, 50, 100],        //可供选择的每页的行数(*)
                search: true,                       //是否显示表格搜索,此搜索是客户端搜索,不会进服务端,所以,个人感觉意义不大
                strictSearch: true,
                showColumns: true,                  //是否显示所有的列
                showRefresh: true,                  //是否显示刷新按钮
                minimumCountColumns: 2,             //最少允许的列数
                clickToSelect: true,                //是否启用点击选中行
                height: 500,                        //行高,如果没有设置height属性,表格自动根据记录条数觉得表格高度
                uniqueId: "ID",                     //每一行的唯一标识,一般为主键列
                showToggle:true,                    //是否显示详细视图和列表视图的切换按钮
                cardView: false,                    //是否显示详细视图
                detailView: false,                   //是否显示父子表
                columns: [{
                    checkbox: true
                }, {
                    field: 'Name',
                    title: '部门名称'
                }, {
                    field: 'ParentName',
                    title: '上级部门'
                }, {
                    field: 'Level',
                    title: '部门级别'
                }, {
                    field: 'Desc',
                    title: '描述'
                }, ]
            });
        };
    
        //得到查询的参数
        oTableInit.queryParams = function (params) {
            var temp = {   //这里的键的名字和控制器的变量名必须一直,这边改动,控制器也需要改成一样的
                limit: params.limit,   //页面大小
                offset: params.offset,  //页码
                departmentname: $("#txt_search_departmentname").val(),
                statu: $("#txt_search_statu").val()
            };
            return temp;
        };
        return oTableInit;
    };
    
    
    var ButtonInit = function () {
        var oInit = new Object();
        var postdata = {};
    
        oInit.Init = function () {
            //初始化页面上面的按钮事件
        };
    
        return oInit;
    };
    

    4、在Controller里面对应的方法

    public JsonResult GetDepartment(int limit, int offset, string departmentname, string statu)
            {
                var lstRes = new List<Department>();
                for (var i = 0; i < 50; i++)
                {
                    var oModel = new Department();
                    oModel.ID = Guid.NewGuid().ToString();
                    oModel.Name = "销售部" + i ;
                    oModel.Level = i.ToString();
                    oModel.Desc = "暂无描述信息";
                    lstRes.Add(oModel);
                }
    
                var total = lstRes.Count;
                var rows = lstRes.Skip(offset).Take(limit).ToList();
                return Json(new { total = total, rows = rows }, JsonRequestBehavior.AllowGet);
            }
    

    这里有一点需要注意:如果是服务端分页,返回的结果必须包含total、rows两个参数。漏写或错写都会导致表格无法显示数据。相反,如果是客户端分页,这里要返回一个集合对象到前端。

    5、效果及说明
    效果及说明

    效果图:
    在这里插入图片描述

    二、表格行样式:不同状态的订单显示不同的颜色

    在这里插入图片描述

    初始化表格的时候

    //初始化Table
    $('#tb_order').bootstrapTable({
                url: '/TableStyle/GetOrder',         //请求后台的URL(*)
                method: 'get',                      //请求方式(*)
                //toolbar: '#toolbar',                //工具按钮用哪个容器
                striped: true,                      //是否显示行间隔色
                cache: false,                       //是否使用缓存,默认为true,所以一般情况下需要设置一下这个属性(*)
                pagination: true,                   //是否显示分页(*)
                sortable: false,                     //是否启用排序
                sortOrder: "asc",                   //排序方式
                queryParams: oTableInit.queryParams,//传递参数(*)
                sidePagination: "server",           //分页方式:client客户端分页,server服务端分页(*)
                pageNumber: 1,                       //初始化加载第一页,默认第一页
                pageSize: 10,                       //每页的记录行数(*)
                pageList: [10, 25, 50, 100],        //可供选择的每页的行数(*)
                search: true,                       //是否显示表格搜索,此搜索是客户端搜索,不会进服务端,所以,个人感觉意义不大
                strictSearch: true,
                showColumns: true,                  //是否显示所有的列
                showRefresh: true,                  //是否显示刷新按钮
                minimumCountColumns: 2,             //最少允许的列数
                clickToSelect: true,                //是否启用点击选中行
                height: 500,                        //行高,如果没有设置height属性,表格自动根据记录条数觉得表格高度
                uniqueId: "ID",                     //每一行的唯一标识,一般为主键列
                showToggle: true,                    //是否显示详细视图和列表视图的切换按钮
                cardView: false,                    //是否显示详细视图
                detailView: false,                   //是否显示父子表
                rowStyle: function (row, index) {
                    //这里有5个取值代表5中颜色['active', 'success', 'info', 'warning', 'danger'];
                    var strclass = "";
                    if (row.ORDER_STATUS == "待排产") {
                        strclass = 'success';//还有一个active
                    }
                    else if (row.ORDER_STATUS == "已删除") {
                        strclass = 'danger';
                    }
                    else {
                        return {};
                    }
                    return { classes: strclass }
                },
                columns: [{
                    checkbox: true
                }, {
                    field: 'ORDER_NO',
                    title: '订单编号'
                }, {
                    field: 'ORDER_TYPE',
                    title: '订单类型'
                }, {
                    field: 'ORDER_STATUS',
                    title: '订单状态'
                }, {
                    field: 'REMARK',
                    title: '备注'
                }, ]
            });
    

    其实重点就在这个参数里面:

    rowStyle: function (row, index) {
                    //这里有5个取值代表5中颜色['active', 'success', 'info', 'warning', 'danger'];
                    var strclass = "";
                    if (row.ORDER_STATUS == "待排产") {
                        strclass = 'success';//还有一个active
                    }
                    else if (row.ORDER_STATUS == "已删除") {
                        strclass = 'danger';
                    }
                    else {
                        return {};
                    }
                    return { classes: strclass }
                },
    

    bootstrap table支持5中表格的行背景色,分别是’active’, ‘success’, ‘info’, ‘warning’, 'danger’这五种,至于每种对应的背景颜色,将代码运行起来就可看到。关于这个方法的返回值,按照bootstrap table的规则,必须返回一个json格式的对象型如: { classes: strclass }

    三、表格行内编辑

    编辑前
    在这里插入图片描述
    点击某个单元格数据
    在这里插入图片描述

    在这里插入图片描述

    编辑后完成后
    在这里插入图片描述
    关于表格行内编辑,需要使用bootstrap table扩展的几个js文件。
    1、引入额外的js文件

    <link rel="stylesheet" href="//rawgit.com/vitalets/x-editable/master/dist/bootstrap3-editable/css/bootstrap-editable.css">
    <script src="//rawgit.com/vitalets/x-editable/master/dist/bootstrap3-editable/js/bootstrap-editable.js"></script>
    <script src="~/Content/bootstrap-table/extensions/editable/bootstrap-table-editable.js"></script>
    

    2、在cshtml页面定义表格时,添加两个属性

    <table id="tb_departments">
            <thead>
                <tr>
                    <th data-field="Name" data-editable="true">部门名称</th>
                    <th data-field="ParentName">上级部门</th>
                    <th data-field="Level" data-editable="true">部门级别</th>
                    <th data-field="Desc" data-editable="true">描述</th>
                </tr>
            </thead>
        </table>
    

    如果是在js里面初始化,写法如下:

    {
             field: "name",
             title: "名称",
             editable:true
    }
    

    3、在js里面初始化表格的时候注册编辑保存的事件

    $('#tb_departments').bootstrapTable({
                url: '/Editable/GetDepartment',         //请求后台的URL(*)
                method: 'get',                      //请求方式(*)
                toolbar: '#toolbar',                //工具按钮用哪个容器
                striped: true,                      //是否显示行间隔色
                cache: false,                       //是否使用缓存,默认为true,所以一般情况下需要设置一下这个属性(*)
                pagination: true,                   //是否显示分页(*)
                sortable: false,                     //是否启用排序
                sortOrder: "asc",                   //排序方式
                queryParams: oTableInit.queryParams,//传递参数(*)
                sidePagination: "server",           //分页方式:client客户端分页,server服务端分页(*)
                pageNumber: 1,                       //初始化加载第一页,默认第一页
                pageSize: 10,                       //每页的记录行数(*)
                onEditableSave: function (field, row, oldValue, $el) {
                    $.ajax({
                        type: "post",
                        url: "/Editable/Edit",
                        data: { strJson: JSON.stringify(row) },
                        success: function (data, status) {
                            if (status == "success") {
                                alert("编辑成功");
                            }
                        },
                        error: function () {
                            alert("Error");
                        },
                        complete: function () {
    
                        }
    
                    });
                }
            });
    

    重点还是看看这个事件的处理方法

    onEditableSave: function (field, row, oldValue, $el) {
                    $.ajax({
                        type: "post",
                        url: "/Editable/Edit",
                        data: { strJson: JSON.stringify(row) },
                        success: function (data, status) {
                            if (status == "success") {
                                alert("编辑成功");
                            }
                        },
                        error: function () {
                            alert("Error");
                        },
                        complete: function () {
    
                        }
    
                    });
                }
    

    对应的方法里面需要自己处理保存的逻辑。四个参数field, row, oldValue, $el分别对应着当前列的名称、当前行数据对象、更新前的值、编辑的当前单元格的jQuery对象。

    四、表格行列合并

    在这里插入图片描述
    1、cshtml页面

    <table id="tb_report">
            <thead>
                <tr>
                    <th colspan="4" data-valign="middle" data-align="center">第一季度</th>
                    <th colspan="4" data-valign="middle" data-align="center">第二季度</th>
                    <th colspan="4" data-valign="middle" data-align="center">第三季度</th>
                    <th colspan="4" data-valign="middle" data-align="center">第四季度</th>
                    <th data-field="TotalCount" rowspan="2" data-valign="middle" data-align="center">年度汇总</th>
                </tr>
                <tr>
                    <th data-field="JanCount" data-align="center">一月</th>
                    <th data-field="FebCount" data-align="center">二月</th>
                    <th data-field="MarCount" data-align="center">三月</th>
                    <th data-field="FirstQuarter" data-align="center">第一季度</th>
    
                    <th data-field="AprCount" data-align="center">四月</th>
                    <th data-field="MayCount" data-align="center">五月</th>
                    <th data-field="JunCount" data-align="center">六月</th>
                    <th data-field="SecondQuarter" data-align="center">第二季度</th>
    
                    <th data-field="JulCount" data-align="center">七月</th>
                    <th data-field="AguCount" data-align="center">八月</th>
                    <th data-field="SepCount" data-align="center">九月</th>
                    <th data-field="ThirdQuarter" data-align="center">第三季度</th>
    
                    <th data-field="OctCount" data-align="center">十月</th>
                    <th data-field="NovCount" data-align="center">十一月</th>
                    <th data-field="DecCount" data-align="center">十二月</th>
                    <th data-field="ForthQuarter" data-align="center">第四季度</th>
                    
                </tr>
            </thead>
        </table>
    

    2、js初始化并无特殊

    $('#tb_report').bootstrapTable({
                url: '/GroupColumns/GetReport',         //请求后台的URL(*)
                method: 'get',                      //请求方式(*)
                toolbar: '#toolbar',                //工具按钮用哪个容器
                striped: true,                      //是否显示行间隔色
                cache: false,                       //是否使用缓存,默认为true,所以一般情况下需要设置一下这个属性(*)
                pagination: true,                   //是否显示分页(*)
                sortOrder: "asc",                   //排序方式
                queryParams: oTableInit.queryParams,//传递参数(*)
                sidePagination: "server",           //分页方式:client客户端分页,server服务端分页(*)
                pageNumber: 1,                       //初始化加载第一页,默认第一页
                pageSize: 10,                       //每页的记录行数(*)
                pageList: [10, 25, 50, 100],        //可供选择的每页的行数(*)
            });
    

    当然,有人说了,你都可以不用js初始化,直接在cshtml里面用table的属性去设置url、分页等信息。确实,如果我们看过它的api,会发现它初始化的每一个属性都对应一个table的属性。型如
    在这里插入图片描述
    如果你的表格没有一些特殊的事件需要处理,这样是完全没有问题的。

    五、表格数据导出

    关于表格数据导出,bootstrap table支持三种模式的导出:basic、all、selected。也就是当前页数据导出、所有数据导出、选中数据导出。并且支持导出多种类型的文件,比如常见的excel、xml、json等格式。

    注意:导出的功能虽然很好用,但是遗憾的是不支持IE浏览器,博主试过官网上面的example,好像IE也导出不了。待验证。

    导出当前页到excel
    在这里插入图片描述
    在这里插入图片描述

    在这里插入图片描述
    在这里插入图片描述

    导出表格所有数据
    在这里插入图片描述
    在这里插入图片描述

    导出选中行数据
    在这里插入图片描述
    在这里插入图片描述
    至于其他类型的文件的导出,和excel基本相同,就不做效果展示了。

    1、引入额外的js文件

    <script src="~/Content/bootstrap-table/extensions/export/bootstrap-table-export.js"></script>
    <script src="//rawgit.com/hhurz/tableExport.jquery.plugin/master/tableExport.js"></script>
    

    2、js初始化的时候

    $('#tb_departments').bootstrapTable({
                url: '/Export/GetDepartment',         //请求后台的URL(*)
                method: 'get',                      //请求方式(*)
                toolbar: '#toolbar',                //工具按钮用哪个容器
                striped: true,                      //是否显示行间隔色
                cache: false,                       //是否使用缓存,默认为true,所以一般情况下需要设置一下这个属性(*)
                pagination: true,                   //是否显示分页(*)
                sortable: false,                     //是否启用排序
                sortOrder: "asc",                   //排序方式
                queryParams: oTableInit.queryParams,//传递参数(*)
                sidePagination: "client",           //分页方式:client客户端分页,server服务端分页(*)
                pageNumber: 1,                       //初始化加载第一页,默认第一页
                pageSize: 10,                       //每页的记录行数(*)
                pageList: [10, 25, 50, 100],        //可供选择的每页的行数(*)
                clickToSelect:true,
                showExport: true,                     //是否显示导出
                exportDataType: "basic",              //basic', 'all', 'selected'.
                columns: [{
                    checkbox: true
                }, {
                    field: 'Name',
                    title: '部门名称'
                }, {
                    field: 'ParentName',
                    title: '上级部门'
                }, {
                    field: 'Level',
                    title: '部门级别'
                }, {
                    field: 'Desc',
                    title: '描述'
                }, ]
            });
    

    还是来看重点:这两个属性

    showExport: true,                     //是否显示导出
    exportDataType: "basic",              //basic', 'all', 'selected'.
    

    showExport表示是否显示导出的按钮,exportDataType表示导出的模式是当前页、所有数据还是选中数据。

    六、父子表

    在这里插入图片描述
    在这里插入图片描述
    初始化表格的时候有一个属性“detailView”,将它设置为true,在每行的前面即可看到一个“+”形状的图标。点击这个图标即触发加载子表格的事件。

    1、初始化表格,注册行展开事件

    $("#tb_powerset").bootstrapTable({
                    url: '/api/MenuApi/GetParentMenu',
                    method: 'get',
                    detailView: true,//父子表
                    //sidePagination: "server",
                    pageSize: 10,
                    pageList: [10, 25],
                    columns: [{
                        field: 'MENU_NAME',
                        title: '菜单名称'
                    }, {
                        field: 'MENU_URL',
                        title: '菜单URL'
                    }, {
                        field: 'PARENT_ID',
                        title: '父级菜单'
                    }, {
                        field: 'MENU_LEVEL',
                        title: '菜单级别'
                    }, ],
                    //注册加载子表的事件。注意下这里的三个参数!
                    onExpandRow: function (index, row, $detail) {
                        oInit.InitSubTable(index, row, $detail);
                    }
                });
    

    还是来看看子表加载事件onExpandRow对应方法function (index, row, $detail)的三个参数,

    index:父表当前行的行索引。

    row:父表当前行的Json数据对象。

    $detail:当前行下面创建的新行里面的td对象。

    第三个参数尤其重要,因为生成的子表的table在装载在$detail对象里面的。bootstrap table为我们生成了$detail这个对象,然后我们只需要往它里面填充我们想要的table即可。

    2、我们来看oInit.InitSubTable()这个方法

    //初始化子表格(无线循环)
        oInit.InitSubTable = function (index, row, $detail) {
            var parentid = row.MENU_ID;
            var cur_table = $detail.html('<table></table>').find('table');
            $(cur_table).bootstrapTable({
                url: '/api/MenuApi/GetChildrenMenu',
                method: 'get',
                queryParams: { strParentID: parentid },
                ajaxOptions: { strParentID: parentid },
                clickToSelect: true,
                detailView: true,//父子表
                uniqueId: "MENU_ID",
                pageSize: 10,
                pageList: [10, 25],
                columns: [{
                    checkbox: true
                }, {
                    field: 'MENU_NAME',
                    title: '菜单名称'
                }, {
                    field: 'MENU_URL',
                    title: '菜单URL'
                }, {
                    field: 'PARENT_ID',
                    title: '父级菜单'
                }, {
                    field: 'MENU_LEVEL',
                    title: '菜单级别'
                }, ],
                //无线循环取子表,直到子表里面没有记录
                onExpandRow: function (index, row, $Subdetail) {
                    oInit.InitSubTable(index, row, $Subdetail);
                }
            });
        };
    

    由此可以看出生成子表的原理就是创建一个table对象cur_table,然后再注册这个对象的表格初始化即可。

    七、行调序

    调序前
    在这里插入图片描述

    拖动行调序到第一行
    在这里插入图片描述
    1、需要额外引用两个js文件

    <script src="~/Content/jquery-ui-1.11.4.custom/external/jquery.tablednd.js"></script>
    <script src="~/Content/bootstrap-table/extensions/reorder-rows/bootstrap-table-reorder-rows.js"></script>
    

    2、在cshtml页面定义表格时,添加两个属性

    <table id="tb_order" data-use-row-attr-func="true" data-reorderable-rows="true"></table>
    

    然后js表格初始化的时候不需要做任何修改,加载出来的表格即可实现行调序的功能。

    八、列调序

    调序前
    在这里插入图片描述

    拖动列标题调序
    在这里插入图片描述

    调序后
    在这里插入图片描述
    1、额外引用几个js和css

    <script src="~/Content/bootstrap-table/extensions/reorder-columns/bootstrap-table-reorder-columns.js"></script>
    <link rel="stylesheet" href="../assets/examples.css">
    <link rel="stylesheet" href="https://rawgit.com/akottr/dragtable/master/dragtable.css">
    <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
    <script src="https://rawgit.com/akottr/dragtable/master/jquery.dragtable.js"></script>
    <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
    <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
    

    2、在cshtml页面定义表格时,添加一个属性

    <table id="tb_departments" data-reorderable-columns="true"></table>
    

    其他地方不用做任何修改。加载出来的表格即可实现列调序。

    九、列标题搜索

    在这里插入图片描述

    在这里插入图片描述
    在这里插入图片描述

    1、引入额外js

    <script src="~/Content/bootstrap-table/extensions/filter-control/bootstrap-table-filter-control.js"></script>
    

    2、定义表格属性及表头属性

    <table id="tb_roles" data-filter-control="true">
            <thead>
                <tr>
                    <th data-field="ROLE_NAME" data-filter-control="select">角色名称</th>
                    <th data-field="DESCRIPTION" data-filter-control="input">角色描述</th>
                    <th data-field="ROLE_DEFAULTURL" data-filter-control="input">角色默认页面</th>
                </tr>
            </thead>
        </table>
    

    因为这里定义了表头的属性,所以,js初始化的时候就不用定义列了。
    3、js初始化

    $('#tb_roles').bootstrapTable({
            url: '/Role/GetRole',
            method: 'get',
            toolbar: '#toolbar',
            striped: true,
            cache: false,
            striped: true,
            pagination: true,
            sortable: true,
            queryParams: function (param) {
                return param;
            },
            queryParamsType: "limit",
            detailView: false,//父子表
            sidePagination: "server",
            pageSize: 10,
            pageList: [10, 25, 50, 100],
            search: true,
            showColumns: true,
            showRefresh: true,
            minimumCountColumns: 2,
            clickToSelect: true, 
        });
    

    最开始,博主以为这种搜索只能用户客户端分页的情况,可是经过调试发现并非如此,原来搜索的条件都能通过json传递到服务端。我们来看调试的过程
    在这里插入图片描述

    后台接收参数,并反序列化
    在这里插入图片描述
    这样我们就能将查询的条件很好地传递到后台。很好很强大啊。这样就免去了扩展表格搜索功能的烦恼~~

    十、可编辑table——x-editable组件

    x-editable组件介绍

    x-editable组件是一个用于创建可编辑弹出框的插件,它支持三种风格的样式:bootstrap、Jquery UI、Jquery。大致效果如下图:

    在这里插入图片描述

    x-editable开源地址:https://github.com/vitalets/x-editable

    x-editable文档地址:http://vitalets.github.io/x-editable/docs.html

    x-editable在线Demo:http://vitalets.github.io/x-editable/demo-bs3.html

    首先来看看bootstrap-table-editable.js这个文件

    /**
     * @author zhixin wen <wenzhixin2010@gmail.com>
     * extensions: https://github.com/vitalets/x-editable
     */
    
    !function ($) {
    
        'use strict';
    
        $.extend($.fn.bootstrapTable.defaults, {
            editable: true,
            onEditableInit: function () {
                return false;
            },
            onEditableSave: function (field, row, oldValue, $el) {
                return false;
            },
            onEditableShown: function (field, row, $el, editable) {
                return false;
            },
            onEditableHidden: function (field, row, $el, reason) {
                return false;
            }
        });
    
        $.extend($.fn.bootstrapTable.Constructor.EVENTS, {
            'editable-init.bs.table': 'onEditableInit',
            'editable-save.bs.table': 'onEditableSave',
            'editable-shown.bs.table': 'onEditableShown',
            'editable-hidden.bs.table': 'onEditableHidden'
        });
    
        var BootstrapTable = $.fn.bootstrapTable.Constructor,
            _initTable = BootstrapTable.prototype.initTable,
            _initBody = BootstrapTable.prototype.initBody;
    
        BootstrapTable.prototype.initTable = function () {
            var that = this;
            _initTable.apply(this, Array.prototype.slice.apply(arguments));
    
            if (!this.options.editable) {
                return;
            }
    
            $.each(this.columns, function (i, column) {
                if (!column.editable) {
                    return;
                }
    
                var _formatter = column.formatter;
                column.formatter = function (value, row, index) {
                    var result = _formatter ? _formatter(value, row, index) : value;
    
                    return ['<a href="javascript:void(0)"',
                        ' data-name="' + column.field + '"',
                        ' data-pk="' + row[that.options.idField] + '"',
                        ' data-value="' + result + '"',
                        '>' + '</a>'
                    ].join('');
                };
            });
        };
    
        BootstrapTable.prototype.initBody = function () {
            var that = this;
            _initBody.apply(this, Array.prototype.slice.apply(arguments));
    
            if (!this.options.editable) {
                return;
            }
    
            $.each(this.columns, function (i, column) {
                if (!column.editable) {
                    return;
                }
    
                that.$body.find('a[data-name="' + column.field + '"]').editable(column.editable)
                    .off('save').on('save', function (e, params) {
                        var data = that.getData(),
                            index = $(this).parents('tr[data-index]').data('index'),
                            row = data[index],
                            oldValue = row[column.field];
    
                        row[column.field] = params.submitValue;
                        that.trigger('editable-save', column.field, row, oldValue, $(this));
                    });
                that.$body.find('a[data-name="' + column.field + '"]').editable(column.editable)
                    .off('shown').on('shown', function (e, editable) {
                        var data = that.getData(),
                            index = $(this).parents('tr[data-index]').data('index'),
                            row = data[index];
                        
                        that.trigger('editable-shown', column.field, row, $(this), editable);
                    });
                that.$body.find('a[data-name="' + column.field + '"]').editable(column.editable)
                    .off('hidden').on('hidden', function (e, reason) {
                        var data = that.getData(),
                            index = $(this).parents('tr[data-index]').data('index'),
                            row = data[index];
                        
                        that.trigger('editable-hidden', column.field, row, $(this), reason);
                    });
            });
            this.trigger('editable-init');
        };
    
    }(jQuery);
    

    这个js其实是对x-editable做了一个简单的封装,增加了列的editable属性以及编辑保存后的一些事件。有了这个作为基础,于是我们行内编辑的代码变成了这样。

    2、需要引用的文件如下:

    <link href="/Content/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
    <link href="~/Content/bootstrap3-editable/css/bootstrap-editable.css" rel="stylesheet" />
    <link href="/Content/bootstrap-table/bootstrap-table.min.css" rel="stylesheet" />
    
    <script src="/Scripts/jquery-1.9.1.min.js"></script>
    <script src="/Content/bootstrap/js/bootstrap.min.js"></script>
    <script src="~/Content/bootstrap3-editable/js/bootstrap-editable.js"></script>
    <script src="~/Content/bootstrap-table/bootstrap-table.js"></script>
    <script src="/Content/bootstrap-table/locale/bootstrap-table-zh-CN.js"></script>
    <script src="~/Content/bootstrap-table/extensions/editable/bootstrap-table-editable.js"></script>
    

    文本框

    $(function () {
            $("#tb_user").bootstrapTable({
                toolbar: "#toolbar",
                idField: "Id",
                pagination: true,
                showRefresh: true,
                search: true,
                clickToSelect: true,
                queryParams: function (param) {
                    return {};
                },
                url: "/Editable/GetUsers",
                columns: [{
                    checkbox: true
                }, {
                    field: "UserName",
                    title: "用户名",
                    editable: {
                        type: 'text',
                        title: '用户名',
                        validate: function (v) {
                            if (!v) return '用户名不能为空';
    
                        }
                    }
                }, {
                    field: "Age",
                    title: "年龄",
                }, {
                    field: "Birthday",
                    title: "生日",
                    formatter: function (value, row, index) {
                        var date = eval('new ' + eval(value).source)
                        return date.format("yyyy-MM-dd");
                    }
                },
                {
                    field: "DeptName",
                    title: "部门"
                }, {
                    field: "Hobby",
                    title: "爱好"                
                }],
                onEditableSave: function (field, row, oldValue, $el) {
                    $.ajax({
                        type: "post",
                        url: "/Editable/Edit",
                        data: row,
                        dataType: 'JSON',
                        success: function (data, status) {
                            if (status == "success") {
                                alert('提交数据成功');
                            }
                        },
                        error: function () {
                            alert('编辑失败');
                        },
                        complete: function () {
    
                        }
    
                    });
                }
            });
        });
    

    后台对应的更新方法

    public JsonResult Edit(User user)
            {
                //更新实体
                return Json(new { }, JsonRequestBehavior.AllowGet);
            }
    

    经过测试,用户名这一列基本可以自由编辑。同样,年龄这一列也可改成这样

    	{
                   field: "Age",
                   title: "年龄",
                   editable: {
                       type: 'text',
                       title: '年龄',
                       validate: function (v) {
                           if (isNaN(v)) return '年龄必须是数字';
                           var age = parseInt(v);
                           if (age <= 0) return '年龄必须是正整数';
                       }
                   }
               }
    

    其他基本不用做任何修改。

    代码释疑:上文在初始化的columns属性里面通过editable属性来配置可编辑的参数,注意这里每个列的editable属性对应的Json对象即为x-editable里面的初始化的Json对象,也就是说我们初始化x-editable的时候可以配置哪些属性,在列的editable属性里面也可以同样配置,这样用起来就爽多了吧。编辑后的提交方法统一放到onEditableSave事件里面统一处理。

    时间选择框

    	{
                    field: "Birthday",
                    title: "生日",
                    formatter: function (value, row, index) {
                        var date = eval('new ' + eval(value).source)
                        return date.format("yyyy-MM-dd");
                    },
                    editable: {
                        type: 'date',
                        title: '生日'
                    }
                }
    

    其他地方不用做任何修改,得到效果:
    在这里插入图片描述
    这是x-editable的默认样式,如果你看着不爽,可以自行配置,x-editable提供了许多配置日期框的参数,如下:
    在这里插入图片描述
    当然,如果精确到时分秒,可以使用datetime类型的编辑框。如下是官方给出的时间框编辑效果,看着还不错。
    在这里插入图片描述
    在这里插入图片描述

    下拉框

    	 {
                    field: "DeptId",
                    title: "部门",
                    editable: {
                        type: 'select',
                        title: '部门',
                        source:[{value:"1",text:"研发部"},{value:"2",text:"销售部"},{value:"3",text:"行政部"}]
                    }
                }
    

    在这里插入图片描述
    当然,这种本地设置数据源的方法肯定是不能满足我们需求的,因为很多情况下拉框里面的选项是从数据库远程得到的。当然x-editable也为我们考虑到了,比如我们可以这样写:

    	 {
                    field: "DeptId",
                    title: "部门",
                    editable: {
                        type: 'select',
                        title: '部门',
                        source: function () {
                            var result = [];
                            $.ajax({
                                url: '/Editable/GetDepartments',
                                async: false,
                                type: "get",
                                data: {},
                                success: function (data, status) {
                                    $.each(data, function (key, value) {
                                        result.push({ value: value.ID, text: value.Name });
                                    });
                                }
                            });
                            return result;
                        }
                    }
                }
    

    后台我们配置一个方法

    public JsonResult GetDepartments()
            {
                var lstRes = new List<Department>();
                lstRes.Add(new Department() { ID = "1", Name = "研发部" });
                lstRes.Add(new Department() { ID = "2", Name = "销售部" });
                lstRes.Add(new Department() { ID = "3", Name = "行政部" });
                lstRes.Add(new Department() { ID = "4", Name = "创意部" });
                lstRes.Add(new Department() { ID = "5", Name = "事业部" });
                return Json(lstRes, JsonRequestBehavior.AllowGet);
            }
    

    代码释疑:这里有一点需要说明一下,细心的园友可能发现了,我们这里的 field: “DeptId” ,为什么这里要配置DeptId而不是DeptName呢?很简单,因为我们需要和数据源里面的value值对应。

    复选框

    	{
                    field: "Hobby",
                    title: "爱好",
                    editable: {
                        type: "checklist",
                        separator:",",
                        source: [{ value: 'bsb', text: '篮球' },
                             { value: 'ftb', text: '足球' },
                             { value: 'wsm', text: '游泳' }],
                    }
                }
    

    在这里插入图片描述
    当然,如果远程数据,也可以使用类似上文的方法去取。

    问题小结

    1、关于中文。

    刚开始,博主没有引用 这个包,所以界面找不到记录是显示的是英文,如下:
    在这里插入图片描述
    后来也是查资料了解到,bootstrap table里面原来还有一个中文包,把它添加进来就好了。

    2、表头宽度不对齐问题。

    如果提交之后的文本内容过多,表格的thead里面th的宽度和tbody里面td的宽度不对其的问题。
    在这里插入图片描述

    展开全文
  • Bootstrap Table 文档

    2018-05-04 22:19:45
    Bootstrap Table 文档,完整的使用手册,Bootstrap Table 文档,完整的使用手册,Bootstrap Table 文档,完整的使用手册,
  • bootstrap table list

    2021-01-19 17:46:37
    bootstrap table list
  • bootstrap table合集(bootstrap-table bootstrap-table-editable bootstrap-editable) bootstrap table js插件,bootstrap table使用比较方便,有点easyui datagrid的风格,具体使用方法可见相关官网 ...
  • bootstrap table小案例

    2020-09-01 09:54:23
    主要介绍了bootstrap table小案例,教大家如何使用表格组件bootstrap table
  • $('#table').bootstrapTable('method', parameter); 例如: $('#my_table').bootstrapTable('refreshOptions', { data: tabledata }); //刷新表格tabledata 为数据 $("#my_table").bootstra...
  • bootstrapTable

    千次阅读 2016-04-06 21:19:52
    bootstrap样式比较好看,现项目中使用,做一下记录,备忘。 引入文件: html代码 ID 姓名 手机号 预产期 风险等级 有无传染病
  • Bootstrap 表格插件 BootstrapTable : jQuery.fn.bootstrapTable.defaults 表格参数说明文档: 表格的参数定义在 jQuery.fn.bootstrapTable.defaults。 ...方法
  • bootstrap table 例子

    2018-08-16 14:14:28
    bootstrap table 例子,从最基础的到可扩展的,一步一步,从配置选项到js配置,应有尽有。
  • 主要为大家汇总了Bootstrap table分页的典型问题,以及对应每个bootstrap table分页问题的解决方法,感兴趣的小伙伴们可以参考一下
  • Bootstrap Table从零开始

    2020-08-30 02:39:11
    Bootstrap Table从零开始,这篇文章主要介绍了Bootstrap Table的使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • $('#tableActivity').bootstrapTable('destroy').bootstrapTable({ url:'', detailView:true, detailFormatter:detailFormatter,//点击展开预先执行事件 cache: false, height: 550, showExport: true, ...
  • JQuery+BootStrap+BootStrapTable相关文件
  • bootstrap table控件

    2018-06-08 13:16:46
    bootstrap table控件,支持翻页功能及查询,刷新等功能。

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 63,463
精华内容 25,385
关键字:

bootstraptable