masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu
Rumah > hujung hadapan web > tutorial js > JavaScript BootStrap Table后台数据绑定、特殊列处理、排序功能详解

JavaScript BootStrap Table后台数据绑定、特殊列处理、排序功能详解

黄舟
Lepaskan： 2017-05-28 10:29:35
asal
2263 orang telah melayarinya

本节主要介绍Bootstrap的后台数据绑定、特殊列处理及列的排序功能，代码简单易懂，非常不错，具有参考借鉴价值，需要的的朋友参考下吧

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

1.数据绑定

 一般做程序设计，很少是使用json文件直接绑定数据。基本上我们都是使用编程语言进行数据获取，并做数据绑定。

放置一个Table控件

<table id="table" ></table>
Salin selepas log masuk

调用javascript的代码

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

2.特殊列处理

在实际应用中，我们需要增加我们的特殊列，例如是操作列，看下列的js代码 增加了一个特殊列

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

js的代码修改为


            

                
Artikel terbaru oleh pengarang

                
            

            

                
Isu terkini

                

                                        

                        

                            Kotak semak Bootstrap Vue <b-table> <b-form-checkbox>
                            Saya cuba menggunakan b-form-checkbox dengan b-table. Cuba dapatkan semula ID modul yang d...
                            

                                

                                     daripada 2024-03-31 18:36:11
                                

                                

                                    
  0 

                                    
1

                                    
389

                                

                            

                        

                    

                    

                                    

            


            

                

                    
Topik-topik yang berkaitan

                    Lagi>
Cadangan popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan

Latihan PHP dalam talian kebajikan awam，Bantu pelajar PHP berkembang dengan cepat！

Tentang kita Penafian Sitemap

© php.cn All rights reserved