bootstraptable学习(1)数据展示

最近工作用到bootstraptable,并且一些功能需要很了解这个插件,那么我们便来看看这个东西

1.css与js的引入,顺序肯定是有讲究的,在这里不细说了

 2.数据的引入与呈现,我们来看一下官网的例子,用 $('#tableModel').bootstrapTable({})这种语句来为配置table的信息,它的打data可以自己定义,好像是一个数组,再用 columns属性做到渲染

 1  <table id="tableModel"></table>
 2   
 3    <script>
 4       $('#tableModel').bootstrapTable({
 5     columns: [{
 6         field: 'id',
 7         title: 'Item ID'
 8     }, {
 9         field: 'name',
10         title: 'Item Name'
11     }, {
12         field: 'price',
13         title: 'Item Price'
14     }],
15     data: [{
16         id: 1,
17         name: 'Item 1',
18         price: '$1'
19     }, {
20         id: 2,
21         name: '商品2',
22         price: '$2'
23     }]
24 });
25   </script>

3.data-toggle="table",自己直接写table

 1 <table data-toggle="table">
 2     <thead>
 3         <tr>
 4             <th>Item ID</th>
 5             <th>Item Name</th>
 6             <th>Item Price</th>
 7         </tr>
 8     </thead>
 9     <tbody>
10         <tr>
11             <td>1</td>
12             <td>Item 1</td>
13             <td>$1</td>
14         </tr>
15         <tr>
16             <td>2</td>
17             <td>Item 2</td>
18             <td>$2</td>
19         </tr>
20     </tbody>
21 </table>

4.现在我们从后台获取数据,通过实验我发现如果从后台直接返回一个list前台是无法展示的,所以我将后台的list序列化成json对象,field为实体类里的字段的名称

1  context.Response.ContentType = "text/plain";
2             var productList = repo.Products.ToList();
3            var productListJson =  JsonConvert.SerializeObject(productList);
4             context.Response.Write(productListJson);

 1 function init() {
 2     $('#bootstrapModel').bootstrapTable({
 3         url: "../Listing.ashx",
 4         method: 'post', 
 5         columns: [
 6             {
 7             field: 'ProductID',
 8             title: '编号'
 9         }, {
10            field: 'Name',
11            title: '产品名称'
12         }, {
13            field: 'Description',
14            title: '描述'
15         }, {
16            field: 'Price',
17             title: '价格'
18         }
19 
20         ]
21     });
22     
23 }

 

 

转载于:https://www.cnblogs.com/Spinoza/p/8902754.html