社群 學習 工具庫 休閒
搜尋
繁体中文
首頁 > web前端 > js教程 > JavaScript BootStrap Table後台資料綁定、特殊列處理、排序功能詳解

JavaScript BootStrap Table後台資料綁定、特殊列處理、排序功能詳解

黄舟
發布： 2017-05-28 10:29:35
原創
2263 人瀏覽過

本節主要介紹Bootstrap的後台資料綁定、特殊列處理及列的排序功能，程式碼簡單易懂，非常不錯，具有參考借鑒價值，需要的的朋友參考下吧

本節主要介紹Bootstrap的後台資料綁定、特殊列處理及列的排序功能

1.資料綁定

 一般做程式設計，很少是使用json檔案直接綁定資料。基本上我們都是使用程式語言進行資料獲取，並做資料綁定。

放置一個Table控制項

<table id="table" ></table>
登入後複製

呼叫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;
  }
  ],
});
登入後複製

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;
    }
  }
登入後複製

js的程式碼修改為


            

                
作者最新文章

                
            

            

                
最新問題

                

                                        

                        

                            Bootstrap Vue 複選框 <b-table> <b-form-checkbox>
                            我正在嘗試將b-form-checkbox與b-table一起使用。嘗試檢索選定的模組ID。 <b-tableid="module-table":item...
                            

                                

                                     來自於 2024-03-31 18:36:11
                                

                                

                                    
  0 

                                    
1

                                    
389

                                

                            

                        

                    

                    

                                    

            


            

                

                    
相關專題

                    更多>
熱門推薦
熱門教學
更多>
相關教學
熱門推薦
最新課程
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板