table 订阅
Table是一个数据库控件, [1]  主要用于在web页面上创建表格,其功能与HtmlTable类似。不同的是,Table控件可以用动态的内容以编程的方式来生成表格。 展开全文
Table是一个数据库控件, [1]  主要用于在web页面上创建表格,其功能与HtmlTable类似。不同的是,Table控件可以用动态的内容以编程的方式来生成表格。
信息
外文名
table
中文名
工作台
table基本信息
〈table〉...〈/table〉 - 定义表格〈th〉 - 定义表头 Defines a table header〈tr〉 - 定义表行 Defines a table row〈td〉 - 定义表元(表格的具体数据) td stands for "table data," Defines a table cell.〈table border〉〈/tr〉〈/table〉〈table〉〈/tr〉〈/table〉
收起全文
精华内容
参与话题
问答
  • Bootstrap Table API 中文版(完整翻译文档)

    万次阅读 多人点赞 2017-09-11 20:20:27
    >Bootstrap table API 中文文档(完整翻译文档) *$('#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-toggle String table 只要引入 jquery、bootstrap 、bootstrap-table的包,不用在js里面定义就可以使用
    默认有写data-toggle="table",data-toggle应该知道吧,常用的有"tooltip、popover等等",这边就不说了
    classes data-classes String table table-hover 表的class属性,如果没有自己定义,则默认有边框,并且当鼠标悬浮在那一行,背景会变为浅灰色.
    sortClass data-sort-class String undefined 声明表格td的class名,代表此列元素的class名将被排序
    height data-height Number undefined 表格的高度
    undefinedText data-undefined-text String - 当不写任何内容默认显示'-'
    striped data-striped Boolean false 默认false,当设为true,则每行表格的背景会显示灰白相间
    sortName data-sort-name String undefined 定义哪一列的值会被排序,写data-field的自定义名,没定义默认都不排列,同下面的sortOrder结合使用,没写的话列默认递增(asc)
    sortOrder data-sort-order String asc 同上面的结合使用,默认递增(asc),也可设为递减(desc)
    sortStable data-sort-stable Boolean false (别看错了,是sortStable,sortable在下面)默认false,设为true,则和sort部分一样,区别是:在排序过程中,如果存在相等的元素,则原来的顺序不会改变。原文还有一句:(如果你把此属性设为了true)我们将为此行添加'_position'属性
    iconsPrefix data-icons-prefix String glyphicon 定义字体库 ('Glyphicon' or 'fa' for FontAwesome),使用"fa"时需引用 FontAwesome,并且配合 icons 属性实现效果 Glyphicon 集成于Bootstrap可免费使用
    iconSize data-icon-size String undefined 定义的图标大小:
          - undefined =>默认表示默认的按钮尺寸(btn)
          - xs   =>超小按钮的尺寸(btn-xs)
          - sm  =>小按钮的尺寸(btn-sm)
          - lg    =>大按钮的尺寸(btn-lg)
    buttonsClass data-buttons-class String default 按钮的类,默认为default。
          - 可选的有:primary、danger、warning等等
          - 写了之后会自动转换为btn-primary(蓝色)、btn-danger(红色)、btn-warning(黄色)等格式,所以前面不要再加"btn-",默认为btn-default(白色)
          - 参考菜鸟教程:Bootstrap 按钮
    icons data-icons Object { 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",后面是服务器发来的字段名
    dataField data-data-field String rows       - 名称写自己定义的每列的字段名,也就是key,通过key才能给某行的某列赋value。
          - 原文:获取每行数据json内的key
          - 例如:{"name":"zz","age":20},name和age就是key,如果这是从服务端请求的json,那可能和每列定义的字段不同,但都是唯一的
    ajax data-ajax Function undefined       - ajax方法,和jQuery的ajax方法类似
          - 参考 BootstrapTable实现定时刷新数据,只是参考,因为那是jQuery的ajax方法
    method data-method String get 向服务器请求远程数据的方式,默认为'get',可选'post'
    url data-url String undefined 向服务器请求的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)
    cache data-cache Boolean true 默认缓存ajax请求,设为false则禁用缓存
    contentType data-content-type String application/json 请求数据的contentType(内容类型),用于定义文件的类型,决定接收方以什么形式读取这个文件。
          - 默认application/json,用来告诉接收端从服务器发来的消息是序列化后的json字符串
    dataType data-data-type String json 期望从服务器获取的数据的类型,默认为json格式字符串
    ajaxOptions data-ajax-options Object {} 向服务器请求ajax时的附加项,默认无附加
          - 参考 jQuery.ajax()
    queryParams data-query-params Function
    function(params){
    return params;}
    当请求数据时,你可以通过修改queryParams向服务器发送其余的参数。
          - queryParamsType="limit",它的参数包括:limit,offset,search,sort,order Else
          - params包括:pageSize,pageNumber,searchText,sortName,sortOrder
          - 当return false,请求则终止
    queryParamsType data-query-params-type String limit 默认"limit",设置该属性用来发送符合RESTful格式的参数
    responseHandler data-response-handler Function
    function(res){
    return res;}
    在加载服务器发送来的数据之前,处理数据的格式,参数res表示the response data(获取的数据)
    pagination data-pagination Boolean false 默认为false,表格的底部工具栏不会显示分页条(pagination toolbar),可以设为true来显示
    paginationLoop data-pagination-loop Boolean true 默认true,分页条无限循环
    onlyInfoPagination data-only-info-pagination Boolean false 前提:pagination设为true,启用了分页功能。
          - 默认false,设为true显示总记录数
    sidePagination data-side-pagination String client 设置在哪进行分页,默认"client",可选"server",如果设置 "server",则必须设置url或者重写ajax方法
          - 请记住,如果服务端分页选项使用了自定义的,那么请求的服务器响应格式是不同的,参考下面两个数据格式:
          Without server-side pagination(没有启用服务端分页)
          With server-side pagination(启用服务端分页)
    pageNumber data-page-number Number 1 前提:pagination设为true,启用了分页功能。
          - 默认第1页,用于设置初始的页数
    pageSize data-page-size Number 10 前提:pagination设为true,启用了分页功能。
          - 默认每页显示10条记录,用于设置每页初始显示的条数
    pageList data-page-list Array [10, 25, 50, 100] 前提:pagination设为true,启用了分页功能。
          - 默认为[10, 25, 50, 100],即可以选择"每页显示10/25/50/100条记录",用于设置选择每页显示的条数
    selectItemName data-select-item-name String btSelectItem radio(单选按钮)或checkbox(复选框)的字段名
    smartDisplay data-smart-display Boolean true 默认为true,会 机智地(<_<) 根据情况显示分页(pagination)或卡片视图(card view)
    escape data-escape Boolean false 跳过插入HTML中的字符串,替换掉特殊字符(后面符号没有逗号):&,<,>,",`,'
    search data-search Boolean false 默认false不显示表格右上方搜索框 ,可设为true,在搜索框内只要输入内容即开始搜索
    searchOnEnterKey data-search-on-enter-key Boolean false 默认false不启用,设为true启用,比功能是与上面相比,在搜索框内输入内容并且按下回车键才开始搜索
    strictSearch data-strict-search Boolean false 设为true,开启精确搜索
    searchText data-search-text String "" 前提:search设为true,启用了搜索功能。
          - 搜索框初始显示的内容,默认空字符串
    searchTimeOut data-search-time-out Number 500 前提:search设为true,启用了搜索功能。
          - 设置搜索文件的超时时间(原文:Set timeout for search fire,不知道是写错了还是我知识面太窄,"search fire"是什么意思,官方API错了?给我整蒙逼了)
    trimOnSearch data-trim-on-search Boolean true 默认true,自动忽略空格
    showHeader data-show-header Boolean true 默认为true显示表头,设为false隐藏
    showFooter data-show-footer Boolean false 默认为false隐藏表尾,设为true显示
    showColumns data-show-columns Boolean false 默认为false隐藏某列下拉菜单,设为true显示
    showRefresh data-show-refresh Boolean false 默认为false隐藏刷新按钮,设为true显示
    showToggle data-show-toggle Boolean false 默认为false隐藏视图切换按钮,设为true显示

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

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

    列的各项(Column options )

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

    名称 属性 类型 默认值 作用描述
    radio data-radio Boolean false 默认false不显示radio(单选按钮),设为true则显示,radio宽度是固定的
    checkbox data-checkbox Boolean false 默认false不显示checkbox(复选框),设为true则显示,checkbox的每列宽度已固定
    field data-field String undefined 是每列的字段名,不是表头所显示的名字,通过这个字段名可以给其赋值,相当于key,表内唯一
    title data-title String undefined 这个是表头所显示的名字,不唯一,如果你喜欢,可以把所有表头都设为相同的名字
    titleTooltip data-title-tooltip String undefined 当悬浮在某控件上,出现提示
           - 参考 Bootstrap 提示工具(Tooltip)插件
    class class/data-class String undefined 没什么好说的,就是class
    rowspan rowspan/data-rowspan Number undefined 每格所占的行数
    colspan colspan/data-colspan Number undefined 每格所占的列数
    align data-align String undefined 每格内数据的对齐方式,有:left(靠左)、right(靠右)、center(居中)
    halign data-halign String undefined table header(表头)的对齐方式,有:left(靠左)、right(靠右)、center(居中)
    falign data-falign String undefined table footer(表脚,就这样译,任性,其实随便译啦,知道就好)的对齐方式,有:left(靠左)、right(靠右)、center(居中)
    valign data-valign String undefined 每格数据的对齐方式,有:top(靠上)、middle(居中)、bottom(靠下)
    width data-width Number(单位:px或%) undefined 每列的宽度。
           - 如果没有自定义宽度,那么宽度会根据内容的宽度自适应。
           - 如果表是左适应(left responsive)或者设置的宽度小于内容的宽度,那么,宽度还是会自适应(可以在class或其他的属性中使用 min-width 或 max-width)。
           - 你也可以使用"%"作为单位,这样的话,bootstapTable将按百分比划分,如果你想使用"pixels(像素值)",你可以只写数字(只要不加"%",单位默认"px",不嫌麻烦,或者想更清晰,你也可以加上"px")
    sortable data-sortable Boolean false 默认false就默认显示,设为true则会被排序
    order data-order String asc 默认的排序方式为"asc(升序)",也可以设为"desc(降序)"。
           - 与上面的结合使用,不然都不让排序了,你还考虑什么升降。
    visible data-visible Boolean true 默认为true显示该列,设为false则隐藏该列。
           - 还是很有用的,例如隐藏自定义index列,按某属性排序后会变乱,你可以读取某行的index来进行赋值
    cardVisible data-card-visible Boolean true 默认为true显示该列,设为false则隐藏。
    switchable data-switchable Boolean true 默认为true显示该列,设为false则禁用列项目的选项卡。
    clickToSelect data-click-to-select Boolean true 默认true不响应,设为false则当点击此行的某处时,不会自动选中此行的checkbox(复选框)或radiobox(单选按钮)
    formatter data-formatter Function undefined 需要此列的对象。
           某格的数据转换函数,需要三个参数:
             -value: field(字段名)
             -row:行的数据
             -index:行的(索引)index
    footerFormatter data-footer-formatter Function undefined 需要此列的对象。
           某格的数据转换函数,需要一个参数:
             -data: 所有行数据的数组
           函数需要返回(return)footer某格内所要显示的字符串的格式,还要包括内容
    events data-events Object undefined 当某格使用formatter函数时,事件监听会响应,需要四个参数:
             -event:jQuery事件(参考Events)。
             - value:字段名
             - row:行数据
             - index:此行的index
    举个例子:
         <th .. data-events="operateEvent"> var operateEvents = {'click .like': function (e, value, row, index) {}};
    sorter data-sorter Function undefined 自定义的排序函数,实现本地排序,需要两个参数:
             - a:第一个字段名
             - b:第二个字段名
    sortName data-sort-name String undefined 除了表头默认的sort-name或列的字段名,还可以使用自定义的sort-name
           对特殊情况说明:
             - 一个列显示的内容或许是"html"代码,如:<b><span style="color:red">abc</span></b>,但是被排列的是html代码中的内容(content):abc
    cellStyle data-cell-style Function undefined 对某格中显示样式(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-searchable Boolean true 默认true,表示此列数据可被查询
    searchFormatter data-search-formatter Boolean true 默认true,可使用格式化的数据查询
    escape data-escape Boolean false 跳过插入HTML中的字符串,替换掉特殊字符(后面符号没有逗号):&,<,>,",`,'

    事件(Events)

    定义事件的格式:

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

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


    事件名 定义在jQuery中的事件名 参数 作用描述
    onAll all.bs.table name, args 当所有触发器被触发时都执行此函数,就是所有的事件都会触发该事件,参数包括:
             - name:事件名
             - args:事件的数据
    onClickRow click-row.bs.table row, $element, field 当单击此行的任意一处,就会触发该事件,所需参数如下(只是按原文译过来的,在bootstraptable的js中不需要这些参数,因为单击该行就会获得一个row,row中包括此行所有数据,只要通过此行某列的字段名即可取出):
             - row:哪一行(从0开始)
             - $element:该行(tr)
             - field:当点击该行,你想获取此行哪一格的数据,field就是此列字段名
             - 参考:Bootstrap Table 双击或单击行获取该行内容
    onDblClickRow dbl-click-row.bs.table row, $element, field 和上面差不多,当双击(666)此行的任意一处,就会触发该事件,所需参数如下(只是按原文译过来的,在bootstraptable的js中不需要这些参数,因为双击该行就会获得一个row,row中包括此行所有数据,只要通过此行某列的字段名即可取出):
             - row:哪一行(从0开始)
             - $element:该行(tr)
             - field:当点击该行,你想获取此行哪一格的数据,field就是此列字段名
             - 参考:Bootstrap Table 双击或单击行获取该行内容
    onClickCell click-cell.bs.table field, value, row, $element 当单击某一格,就会触发该事件,所需参数如下:
             - field:此格所在列的字段名
             - value:此格的数据
             - $element:此行的此列,就是此格(td)
    onDblClickCell dbl-click-cell.bs.table field, value, row, $element 当双击某一格,就会触发该事件,所需参数如下:
             - field:此格所在列的字段名
             - value:此格的数据
             - $element:此行的此列,就是此格(td)
    onSort sort.bs.table name, order 当对某列进行排序时触发该事件,所需参数如下:
             - name:所排序的列的字段名
             - order:所排的顺序
    onCheck check.bs.table row, $element 当选择(check)此行时触发,所需的参数如下:
             - row:所选择的行的字段名
             - $element:此行的DOM元素
    onUncheck uncheck.bs.table row, $element 当取消选择(uncheck)此行时触发,所需的参数如下:
             - row:所取消选择的行的字段名
             - $element:此行的DOM元素
    onCheckAll check-all.bs.table rows 当全选行时触发,所需的参数如下:
             - rows:最近(newly)所选择的行的字段名的数组
    onUncheckAll uncheck-all.bs.table rows 当取消全选行时触发,所需的参数如下:
             - rows:之前或上次(previously)所选择的行的字段名的数组
    onCheckSome check-some.bs.table rows 当选择(check)某些行(多行,rows)时触发,所需的参数如下:
             - rows:之前或上次(previously)所选择的行的字段名的数组
    onUncheckSome uncheck-some.bs.table rows 当取消选择(uncheck)某些行(多行,rows)时触发,所需的参数如下:
             - rows:之前或上次(previously)所选择的行的字段名的数组
    onLoadSuccess load-success.bs.table data 当所有数据被加载时触发
    onLoadError load-error.bs.table status, res 当加载某些数据出现错误时触发
    onColumnSwitch column-switch.bs.table field, checked 当某列改变是否可见的状态时触发
    onColumnSearch column-search.bs.table field, text 当某列被查询时触发
    onPageChange page-change.bs.table number, size 当改变此页所显示的数据条数或改变页码时触发
    onSearch search.bs.table text 当查询此表时触发
    onToggle toggle.bs.table cardView 当改变表的视图时触发
    onPreBody pre-body.bs.table data 当<tbody></tbody>中的内容没显示前触发
    onPostBody post-body.bs.table data 当<tbody></tbody>中的内容被加载完后或者在你所用的DOM中有定义则被触发
    onPostHeader post-header.bs.table none 当<thead></thead>中的内容被加载完后或者在你所用的DOM中有定义则被触发
    onExpandRow expand-row.bs.table index, row, $detail 当查看详细视图(点击查看detail的图标)时触发
    onCollapseRow collapse-row.bs.table index, row 当关闭详细视图(再次点击查看detail的图标)时触发
    onRefreshOptions refresh-options.bs.table options 当刷新各项后或在初始化表(也包括销毁了再初始化)之前触发
    onResetView reset-view.bs.table 当重置(reset)表的视图时触发
    onRefresh refresh.bs.table params 当点击刷新按钮(refresh,不是浏览器的,而是表格右上角的刷新按钮)后触发

    方法(Methods)

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

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

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

    方法名 参数 描述 举例
    append data 将数据追加在最后一行后 $table.bootstrapTable('append', data);data可以是数组
          - 请查看: append
    prepend data 也是追加,只是在第一行之前 $table.bootstrapTable('prepend', data);data可以是数组
          - 请查看: prepend
    remove params 移除一行或多行你所选的数据 $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
    insertRow params 新增一行,所需的参数如下:
          - index:你想插入到哪(只要愿意,想插哪就插哪,想插谁就插谁)
          - row:你想插入的数据
    $table.bootstrapTable('insertRow', {index: 1, row: row});
          - 请查看: insertRow
    updateRow params 更新行数据,所需的参数如下:
          - index:所要更新的行的索引(index)
          - row:你想换的新的数据
    $table.bootstrapTable('updateRow', {index: 1, row: row});
          - 请查看: updateRow
          - 请查看: Bootstrap Table实现定时刷新数据
    updateByUniqueId params 更新某行数据,所需的参数如下:
          - id:你想更新那行的id(唯一),(只要愿意,想换哪个换哪个)
          - row:你想换的新的数据
    $table.bootstrapTable('updateByUniqueId', {id: 3, row: row});
          - 请查看: updateByUniqueId
    showRow params 显示特定行,所需的参数至少包括下面所列的一个:
          - id:所要显示的行的索引(index)
          - uniqueId:那一行的id
    $table.bootstrapTable('showRow', {index:1});
          - 请查看: showRow/hideRow
    hideRow params 隐藏特定行,所需的参数至少包括下面所列的一个:
          - id:所要隐藏的行的索引(index)
          - uniqueId:那一行的id
    $table.bootstrapTable('hideRow', {index:1});
          - 请查看: showRow/hideRow
    getRowsHidden boolean 获取隐藏的行(官方原话很多,其实总结起来就前面那一句) $table.bootstrapTable('getRowsHidden');

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

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

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

    方法名 参数 描述 举例
    getHiddenColumns - 获取所有隐藏的列 $table.bootstrapTable('getHiddenColumns');
    getVisibleColumns - 获取所有显示的列 $table.bootstrapTable('getVisibleColumns');
    scrollTo value 滚……到哪个位置,单位是'px',如果设为'bottom',嗖,恭喜你已到表尾 $table.bootstrapTable('scrollTo', 0);
          - 请查看: scrollTo
    getScrollPosition none 获取当前所滚到的位置,单位你懂得,就是'px' $table.bootstrapTable('getScrollPosition');
    filterBy none 只能在客户端(client-side,相对server-side)这边用,过滤表中的数据
    例如:
          - 可以设置{age:10}来只显示age为10的数据
          - 不仅单的,你还可以双飞,甚至多p,设置{age: 10, hairColor: ["blue", "red", "green"]} ,这样你就得到了一群10岁的,头发颜色为蓝,红,绿的……数据
    $table.bootstrapTable('filterBy', { id: [1, 2, 3] });
          - 请查看: filterBy
    selectPage page 跳转到特定的页面 $table.bootstrapTable('selectPage', 1);
          - 请查看: selectPage/prevPage/nextPage
    prevPage none 跳转到上一页 $table.bootstrapTable('prevPage');
          - 请查看: selectPage/prevPage/nextPage
    nextPage none 跳转到下一页 $table.bootstrapTable('nextPage');
          - 请查看: selectPage/prevPage/nextPage
    togglePagination none 词穷,请看例纸 $table.bootstrapTable('togglePagination');
          - 请查看: togglePagination
    toggleView none 改变视图 $table.bootstrapTable('toggleView');
          - 请查看: toggleView
    expandRow index 可使用条件:detail view设为了true,不然无法使用视图功能,这个也没用
          - 通过参数index来展开此列的详细视图
          - 请查看: expandRow-collapseRow
    collapseRow index 可使用条件:detail view设为了true
          - 通过参数index来关闭此列的详细视图
          - 请查看: expandRow-collapseRow
    expandAllRows
    新版有更改(原来为"expandAllRow"),下同
    感谢 @zhq449681061
    is subtable 可使用条件:detail view设为了true
          - 展开所有列的详细视图
    $table.bootstrapTable('expandAllRows');
          - 参考上面的实例,上面是展开(折叠)某一行的视图,这个是所有行的
    collapseAllRows is 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…' “加载中,请等待……”
    formatRecordsPerPage pageNumber '%s records per page' “每页显示 15 条记录”
    formatShowingRows pageFrom, pageTo, totalRows 'Showing %s to %s of %s rows' “显示第 1 到第 15 条记录”
    formatDetailPagination totalRows 'Showing %s rows' “总共 15 条记录”
    formatSearch - 'Search' “搜索”(占位符)
    formatNoMatches - 'No matching records found' “没有找到匹配的记录”
    formatRefresh - 'Refresh' “刷新”(鼠标悬浮显示的文字,下同)
    formatToggle - 'Toggle' “切换”
    formatColumns - 'Columns' “列”

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


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

    维尼聚合工具


    其他相关:


    展开全文
  • element关于table拖拽排序问题

    万次阅读 2019-10-29 20:31:03
    element关于table拖拽排序问题

    博客地址:http://www.globm.top/blog/1/detail/41
    最近在使用element table的时候,经常会遇到排序的问题,如果只是简单的排序的话,element官方已经给出了指定的方法

    //table的默认排序方式是按ID排序 顺序为递减 这里可以改成其它 比如 order
        <el-table :data="tableData" :default-sort="{prop: 'ID', order: 'descending'}">
          //设置sortable属性时出现排序按钮
          <el-table-column prop="ID" label="座号" sortable>
        </el-table>
    

    但是,element官方组件并不支持拖拽排序,我在这里引入sortablejs实现拖拽排序的功能

    • sortablejs GitHub地址
    //sortablejs     GitHub地址
    https://github.com/SortableJS/Sortable#readme
    
    //安装sortable.js
    Install with NPM:
    
    $ npm install sortablejs --save
    
    //在组件内引入
    import Sortable from 'sortablejs'
    
    //为需要拖拽排序的表格添加ref属性
    <el-table  ref="dragTable">
    
    //在数据渲染完毕添加拖拽事件
    created(){
       this.getBanner()
    },
    methods:{
    	async getBanner(val){
              await apiGetBanner().then((res)=>{
                   this.bannerTable = res.data.data;
              })
             this.oldList = this.bannerTable.map(v => v.id);
             this.newList = this.oldList.slice();
             this.$nextTick(() => {
                 this.setSort()  //数据渲染完毕执行方法
             })
        }
        setSort() {
            const el = this.$refs.dragTable.$el.querySelectorAll(
            		'.el-table__body-wrapper > table > tbody'
            )[0];
            this.sortable = Sortable.create(el, {
            	// Class name for the drop placeholder,
            		ghostClass: 'sortable-ghost', 
                    setData: function(dataTransfer) {
                    dataTransfer.setData('Text', '')
                },
               //拖拽结束执行,evt执向拖拽的参数
               onEnd: evt => {
                  //判断是否重新排序
                  if(evt.oldIndex !== evt.newIndex){
                      let data = {
                         id:this.bannerTable[evt.oldIndex].id,
                         banner_order:evt.newIndex
                      }
                      //数据提交失败则恢复旧的排序
                      apiPutBanner(data).catch(()=>{
                         const targetRow = this.bannerTable.splice(evt.oldIndex, 1)[0];
                         this.bannerTable.splice(evt.newIndex, 0, targetRow);
                      })
                  }
                }
            })
        }
    }
    
    

    如果需要列拖拽的话,可以参考下面的代码,和上面是一样的原理,在这里我就不赘述了

    //行拖拽
        rowDrop() {
          const tbody = document.querySelector('.el-table__body-wrapper tbody')
          const _this = this
          Sortable.create(tbody, {
            onEnd({ newIndex, oldIndex }) {
              const currRow = _this.tableData.splice(oldIndex, 1)[0]
              _this.tableData.splice(newIndex, 0, currRow)
            }
          })
        },
        //列拖拽
        columnDrop() {
          const wrapperTr = document.querySelector('.el-table__header-wrapper tr')
          this.sortable = Sortable.create(wrapperTr, {
            animation: 180,
            delay: 0,
            onEnd: evt => {
              const oldItem = this.dropCol[evt.oldIndex]
              this.dropCol.splice(evt.oldIndex, 1)
              this.dropCol.splice(evt.newIndex, 0, oldItem)
            }
          })
        }
    
    展开全文
  • Lua table之增删table.insert和table.remove

    万次阅读 2018-11-15 21:53:30
    在使用Lua进行开发的过程中,对table的处理是很频繁的,这里整理一下table.insert和table.remove这两个函数的使用方法以及一些在使用过程中需要注意的地方! table.insert(list, [pos, ]value) 在表list中的pos...

    在使用Lua进行开发的过程中,对table的处理是很频繁的,这里整理一下table.insert和table.remove这两个函数的使用方法以及一些在使用过程中需要注意的地方!

    table.insert(list, [pos, ]value)

    在表list中的pos位置插入元素value,并将原来在pos位置以及在pos位置后面的元素往后移。pos为可选参数,默认值是#list+1,所以table.insert(list, value)会将元素value插入到表list的末尾处!

    local tbl = {1, 2, 3, 4, 5}
    
    table.insert(tbl, 3, 666)
    print(unpack(tbl))
    -- 1   2   666 3   4   5
    
    table.insert(tbl, 999)
    print(unpack(tbl))
    -- 1   2   666 3   4   5   999

    table.remove(list[, pos])

    移除表list中pos位置的元素,并将原来在pos位置后面的元素往前移(如果有必要),返回这个被移除的值。pos为可选参数,默认值是#list,所以table.remove(list)会移除表list中的最后一个元素!

    local tbl = {1, 2, 3, 4, 5}
    
    local ele = table.remove(tbl, 4)
    print(ele)
    print(unpack(tbl))
    -- 4
    -- 1   2   3   5
    
    ele = table.remove(tbl)
    print(ele)
    print(unpack(tbl))
    -- 5
    -- 1   2   3

    特别注意:在for循环中进行删除操作的时候,应该从后往前倒序遍历,如果从前往后顺序遍历的话有可能会漏掉一些项!

    local tbl = {1, 2, 2, 3, 4, 5}
    -- 顺序遍历:在移除pos为2的元素之后,pos为3以及后面的元素前移导致漏删
    for k, v in pairs(tbl) do
        if v == 2 then
            table.remove(tbl, k)
        end
    end
    print(unpack(tbl))
    -- 1   2   3   4   5
    
    tbl = {1, 2, 2, 3, 4, 5}
    -- 倒序遍历:在for循环中进行删除的正确遍历方式
    for i = #tbl, 1, -1 do
        if tbl[i] == 2 then
            table.remove(tbl, i)
        end
    end
    print(unpack(tbl))
    -- 1   3   4   5

    ps:这两个函数只适用于数组型table的增删!

    展开全文
  • 在使用mybatis generator时,出现MyBatis Generator : Table Configuration scheme.table matched more than one table问题。 原因是使用了mysql8.0以上的版本,参考官网文档...

    在使用mybatis generator时,出现MyBatis Generator : Table Configuration scheme.table matched more than one table问题。
    原因是使用了mysql8.0以上的版本,参考官网文档(http://www.mybatis.org/generator/usage/mysql.html)
    解决方法是在generator.xml文件的jdbcConnection先添加一行代码:

    <property name="nullCatalogMeansCurrent" value="true"/>
    

    在xml文件中的位置

    <!--jdbc的数据库连接-->
            <jdbcConnection driverClass="com.mysql.cj.jdbc.Driver"
                            connectionURL="jdbc:mysql://localhost:3306/tiantian"
                            userId="root"
                            password="root">
                <property name="serverTimezone" value="UTC"/>
                <property name="nullCatalogMeansCurrent" value="true"/>
            </jdbcConnection>
    
    展开全文
  • Created by Jerry Wang on Jul 04, 2014 使用下面的report测试这两种语法的区别: REPORT ztest_key. TYPES: BEGIN OF ty_data, index TYPE int4, name TYPE char10, score TYPE int4, text ...
  • <el-table-column></el-table-column> …… </el-table> </el-table-column> <el-table-column></el-table-column> </el-table> ``` script: ``` data(){ return { isExpand:false...
  • 数据除了放到各自的prop外,还全部放到了第一个el-table-column label为bb表格中 我想要的效果是 ![图片说明](https://img-ask.csdn.net/upload/201910/12/1570841125_689708.png) 上面有一个label表头,没有值,...
  • @Table 注解详解

    万次阅读 2018-11-22 13:36:07
    spring @Table注解 作用是:声明此对象映射到数据库的数据表,通过它可以为实体指定表(talbe) 常用的两个属性: 1、name 用来命名 当前实体类 对应的数据库 表的名字 @Table(name = "tab_user") 2、...
  • BootstrapTable中文文档

    万次阅读 多人点赞 2019-07-18 17:42:07
    表格参数: 名称 标签 类型 默认 描述 - data-toggle String ‘table’ ... ‘table table-hover’ 表格的类名称。默认情况下,表格是有边框的,你可以添加 ‘table-no-b...
  • sql表中drop table和delete table的区别

    万次阅读 2018-10-23 19:32:24
    问题:使用阿里云的maxcompute产品发现有中间表的产生,需要删除。 删表是一个比较危险的操作,这次给了个机会就想尝试下,记得在mysql表中有两种操作,drop与delete,但是在maxcompute产品中尝试时,该产品只支持...
  • LaTeX表格Table使用解析

    万次阅读 多人点赞 2018-09-11 21:58:34
    \begin{table}[htbp] \centering % 显示位置为中间 \caption{standard table} % 表格标题 %字母的个数对应列数,|代表分割线 % l代表左对齐,c代表居中,r代表右对齐 \begin{tabular}{|c|c|c|c|} \...
  • Hive的hql是基于sql而来,而sql中关于表的...1.自主创业方式create table 使用create table从无到有,按照建表的格式和要求实现建表。实际开发中较常用的方式,主要可以定制化建表。 具体参考博客:https://blo...
  • 已经从后台拿数据了,但是再table显示不出来,什么情况,帮忙看看;附上代码 $("#table").bootstrapTable({ // 对应table标签的id url: "task/userTaskInfo", // 获取表格数据的url cache: false, // ...
  • create table select from 和 insert into table select from都是用来复制表,两者的主要区别为: create table select from 要求目标表不存在,因为在插入时会自动创建。 insert into table select from 要求目标...
  • vuejs+element UI table的常见的属性及事件

    万次阅读 多人点赞 2018-04-23 16:20:21
    一.table组件的方法,事件 查看官网 二.常用的事件,属性 (一).属性 1.多选框(type = "selection") 需要实现勾选的功能 在<el-table> 内加入<el-table-column type="selection" width="55"></...
  • table中嵌套多层table

    千次阅读 2019-05-15 15:31:15
    因工作业务需求,需要展示一个多层嵌套的数据结构,现整理如下,分享给需要的朋友,应用框架vue2。 初始的数据结构如下: ... el:"#table1", data:{ table1:[{ order: "ex-20171006", table2: [{ kind: '...
  • <el-table ref="nRiskRateData" :data="nRiskRateData" tooltip-effect="dark" style="width: 100%"> <el-table-column type="selection" width="55"> </el-table-column> <el-table-column label="a" ...
  • .el-table, .el-table__expanded-cell{ background-color: transparent; } /* 表格内背景颜色 */ .el-table th, .el-table tr, .el-table td { background-color: transparent; } 组件化开发 less则需要加上/deep...
  • Lua table之排序table.sort

    万次阅读 2018-11-14 23:43:27
    在Lua中,对table进行排序一般使用Lua自带的排序函数: table.sort(list[, comp]) list为需要排序的目标table,可选参数comp为排序的比较函数! 如果不提供比较函数comp,默认将使用标准Lua操作符"&lt;&...
  • ElementUI table的行高设置

    万次阅读 2018-07-15 20:39:04
    Q(问题):elementUI自带的table设置行高A(解决方法):修改el-table元素中cell-style属性里的padding值为0Example(示例):默认:&lt;template&gt; &lt;el-table :data="tableData" ...
  • 使用layui 渲染table数据表格

    万次阅读 热门讨论 2018-04-18 15:37:00
    先上最终效果图:1,引入layui的css和js文件&lt;link rel="stylesheet" href="lib/layui/css/layui.css"...2,在页面放置一个table元素&lt;table class="layui-hi
  • table自适应

    万次阅读 2018-06-15 16:39:37
    自适应宽度: td { width: 1px; white-space: nowrap; /* 自适应宽度*/ word-break: keep-all; /* 避免长单词截断,保持全部 */ } ...table { table-layout: fixed; width: 100%; }...
  • BootStrap Table:事件、方法、多语言

    万次阅读 多人点赞 2018-06-12 00:36:20
    官方文档地址:...事件对BootStrap Table事件进行处理有以下两种语法:$('#table').bootstrapTable({ onEventName: function (arg1, arg2, ...) { // ... } });$('#tabl...
  • bootstrap table 提示onloadsuccess 了,并且查看有数据,但是table就是不显示; 页面: <div class="fresh-table full-screen-table"> <button id="alertBtn" class="btn btn-default">Alert ...
  • bootstrap table 条件查询

    2016-07-28 09:46:08
    $("#table_report").bootstrapTable({ method: "get",//post取不到数据 url: "station/list", dataType: "json", striped:true, toolbar:"#toolbar", idField:"id", ...
  • element table 组件内容换行方案

    万次阅读 热门讨论 2018-03-07 20:55:27
    element table 组件内容换行方案 背景 临时接手了一个element UI的前端项目,吐槽一下后台接口,这个idCardNo字段。 项目直接使用了el-table组件: &amp;lt;el-table :data=&quot;warnings&...
  • Element UI的表格table列的宽度自适应设置

    万次阅读 热门讨论 2018-03-23 16:05:22
    不要设置 width="110px" ...el-table-column prop="login_id" align="center" label="工号"> </el-table-column> <el-table-column prop="login_id" width="110px" align="center" label="工号...

空空如也

1 2 3 4 5 ... 20
收藏数 545,921
精华内容 218,368
关键字:

table