停放一个Table控件,上一篇小说介绍了骨干的利用教程

上一篇小说介绍了主导的运用教程。本节首要介绍Bootstrap的后台数据绑定、特殊列处理及列的排序作用

本节主要介绍Bootstrap的后台数据绑定、特殊列处理及列的排序效率

 

1.数码绑定

1.多少绑定

 一般做程序设计,很少是选择json文件一向绑定数据。基本上我们都是应用编程语言进行数量得到,并做多少绑定。

 一般做程序设计,很少是使用json文件一向绑定数据。基本上我们都是应用编程语言举办数据得到,并做多少绑定。

停放一个Table控件

停放一个Table控件

<table id="table" ></table>
<table id="table" ></table>

调用javascript的代码

调用javascript的代码

<script >
$('#table').bootstrapTable({
  url: 'tablejson.jsp',  //数据绑定,后台的数据从jsp代码
  search:true,      
  uniqueId:"Id",
  pageSize:"5",
  pageNumber:"1",
  sidePagination:"client",
  pagination:true,
  height:'400',
  columns: [
  {
    field: 'Id',
    title: '中文'
  }, {
    field: 'Name',
    title: 'Name'
  }
  , {
    field: 'Desc',
    title: 'Desc'
  }
  ],
});
<script >
$('#table').bootstrapTable({
    url: 'tablejson.jsp',   //数据绑定,后台的数据从jsp代码
    search:true,            
    uniqueId:"Id",
    pageSize:"5",
    pageNumber:"1",
    sidePagination:"client",
    pagination:true,
    height:'400',
    columns: [

    {
        field: 'Id',
        title: '中文'
    }, {
        field: 'Name',
        title: 'Name'
    }
    , {
        field: 'Desc',
        title: 'Desc'
    }

    ],

});

2.特殊列处理

 

 在实质上接纳中,大家必要充实大家的奇异列,例如是操作列,看下列的js代码
增添了一个奇特列

 

{
    field: '#',
    title: 'control',formatter:function(value,row,index){
    var del='<a href="Delete!delete.action?Id='+row.Id+'" rel="external nofollow" rel="external nofollow" >删除</a>';
    var updt='<a href="supdate.jsp?Id='+row.Id+'" rel="external nofollow" rel="external nofollow" >修改</a>';
    var add='<a href="Include.jsp?Id='+row.Id+'" rel="external nofollow" rel="external nofollow" >增加</a>'
    return del+" "+updt+"&nbsp"+add;
    }
  } 

2.特殊列处理

js的代码修改为

 在其实使用中,我们须要充实大家的越发列,例如是操作列,看下列的js代码
扩充了一个特殊列

<script >
$('#table').bootstrapTable({
  url: 'tablejson.jsp',  //数据绑定,后台的数据从jsp代码
  search:true,      
  uniqueId:"Id",
  pageSize:"5",
  pageNumber:"1",
  sidePagination:"client",
  pagination:true,
  height:'400',
  columns: [

  {
    field: 'Id',
    title: '中文'
  }, {
    field: 'Name',
    title: 'Name'
  }
  , {
    field: 'Desc',
    title: 'Desc'
  }
,
{
    field: '#',
    title: 'control',formatter:function(value,row,index){
    var del='<a href="Delete!delete.action?Id='+row.Id+'" rel="external nofollow" rel="external nofollow" >删除</a>';
    var updt='<a href="supdate.jsp?Id='+row.Id+'" rel="external nofollow" rel="external nofollow" >修改</a>';
    var add='<a href="Include.jsp?Id='+row.Id+'" rel="external nofollow" rel="external nofollow" >增加</a>'
    return del+" "+updt+"&nbsp"+add;
    }
  }
], }); 
{
       field: '#',
        title: 'control',formatter:function(value,row,index){
        var del='<a href="Delete!delete.action?Id='+row.Id+'">删除</a>';
        var updt='<a href="supdate.jsp?Id='+row.Id+'">修改</a>';
        var add='<a href="Include.jsp?Id='+row.Id+'">增加</a>'
        return del+" "+updt+"&nbsp"+add;
        }
    }   

3.列的排序,排序重假诺在列中增加了一个属性

js的代码修改为

{
    field: 'Name',
    title: 'Name',<br><em id="__mceDel">sortable:true</em>
}
<script >
$('#table').bootstrapTable({
    url: 'tablejson.jsp',   //数据绑定,后台的数据从jsp代码
    search:true,            
    uniqueId:"Id",
    pageSize:"5",
    pageNumber:"1",
    sidePagination:"client",
    pagination:true,
    height:'400',
    columns: [

    {
        field: 'Id',
        title: '中文'
    }, {
        field: 'Name',
        title: 'Name'
    }
    , {
        field: 'Desc',
        title: 'Desc'
    }

,

{
       field: '#',
        title: 'control',formatter:function(value,row,index){
        var del='<a href="Delete!delete.action?Id='+row.Id+'">删除</a>';
        var updt='<a href="supdate.jsp?Id='+row.Id+'">修改</a>';
        var add='<a href="Include.jsp?Id='+row.Id+'">增加</a>'
        return del+" "+updt+"&nbsp"+add;
        }
    }

], });

如上所述是小编给大家介绍的BootStrap Table
后台数据绑定、特殊列处理、排序功用,希望对我们有着帮忙,即使大家有其余疑问请给自家留言,小编会及时还原大家的。在此也极度感谢我们对台本之家网站的协理!

  

你可能感兴趣的小说:

3.列的排序,排序重假设在列中扩充了一个属性 

{
        field: 'Name',
        title: 'Name',sortable:true

    }

  

相关文章