bootstrap table教程--后台数据绑定、特殊列处理、排序
2017-05-26 17:14
381 查看
上一篇文章介绍了基本的使用教程。本节主要介绍Bootstrap的后台数据绑定、特殊列处理及列的排序功能
1.数据绑定
一般做程序设计,很少是使用json文件直接绑定数据。基本上我们都是使用编程语言进行数据获取,并做数据绑定。
放置一个Table控件
调用javascript的代码
2.特殊列处理
在实际应用中,我们需要增加我们的特殊列,例如是操作列,看下列的js代码 增加了一个特殊列
js的代码修改为
3.列的排序,排序主要是在列中增加了一个属性
1.数据绑定
一般做程序设计,很少是使用json文件直接绑定数据。基本上我们都是使用编程语言进行数据获取,并做数据绑定。
放置一个Table控件
<table id="table" ></table>
调用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' } ], });
2.特殊列处理
在实际应用中,我们需要增加我们的特殊列,例如是操作列,看下列的js代码 增加了一个特殊列
{ 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+" "+add; } }
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+'">删除</a>'; var updt='<a href="supdate.jsp?Id='+row.Id+'">修改</a>'; var add='<a href="Include.jsp?Id='+row.Id+'">增加</a>' return del+" "+updt+" "+add; } }
], });
3.列的排序,排序主要是在列中增加了一个属性
{ field: 'Name', title: 'Name',sortable:true
}
相关文章推荐
- BootStrap Table 后台数据绑定、特殊列处理、排序功能
- MyGeneration学习笔记(8) :dOOdad提供的数据绑定、特殊函数和事务处理
- MyGeneration学习笔记(8) :dOOdad提供的数据绑定、特殊函数和事务处理
- MyGeneration学习笔记(8) :dOOdad提供的数据绑定、特殊函数和事务处理
- 关于DataList嵌套DataList的问题(重点在于处理某些特殊结构与数据绑定)
- Spring MVC处理前台到后台绑定时间格式、doble等数据的解决方式
- 对gordview后台绑定数据和添加排序功能
- C# winform端 通过HttpWebRequest进行post和get请求,数据格式为json,后台java端接收,其中有关传输特殊字符(\t,\r,',\n,n)等处理
- easyui datagrid 绑定从后台得到的复杂的特殊数据结构
- asp.net customdatagrid 绑定数据用到的ItemDataBound 中的HyperLinkColumn 的跳转链接 通过C#后台 处理的方法
- MyGeneration学习笔记(8) :dOOdad提供的数据绑定、特殊函数和事务处理
- ADO .net 数据库表绑定到gridview 并排序
- datagrid中绑定需要处理的数据
- GridView绑定手工数据源的数据操作(编辑,删除,排序)
- Scott Mitchell 的ASP.NET 2.0数据教程之四十五::DataList和Repeater数据排序(三)
- Scott Mitchell 的ASP.NET 2.0数据操作教程之二十七:创建自定义排序用户界面
- Scott Mitchell 的ASP.NET 2.0数据教程之十八:: 在ASP.NET页面中处理BLL/DAL层的异常
- 一个jdbc的例子(包含sql语句的批处理,事务处理,数据绑定prepare,)
- Scott Mitchell 的ASP.NET 2.0数据教程之三十八:: 处理BLL和DAL的异常
- Scott Mitchell 的ASP.NET 2.0数据教程之二十四:: 分页和排序报表数据