中文字幕av专区_日韩电影在线播放_精品国产精品久久一区免费式_av在线免费观看网站

溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

bootstrap Table插件使用demo

發布時間:2020-10-05 19:43:43 來源:腳本之家 閱讀:174 作者:一枚大帥哥 欄目:web開發

最近研究bootstrap,它僅提供視覺效果,對于數據列表之類的并未涉及,網上找了一下,找到一個Table插件。

名為bootstrapTable。

官方地址:http://bootstrap-table.wenzhixin.net.cn/examples/

github:https://github.com/wenzhixin/bootstrap-table

因為英文差,研究了半天,做了一個demo,將就看

HTML: 

<table class="table" id="dataShow" > 
     <thead> 
       <tr> 
         <th data-checkbox="true">選擇</th> 
         <th data-field="rkey">供應商名稱</th> 
         <th data-field="rkey">供應商編碼</th> 
         <th data-field="name">物料編碼</th> 
         <th data-field="sex">申請類型</th> 
         <th data-field="birthdayString">試用申請編碼</th> 
         <th data-field="age">試用狀態</th> 
         <th data-field="age">廠別</th> 
         <th data-field="age">審批狀態</th> 
         <th data-field="birthday">申請時間</th> 
         <th data-field="age">試用結果</th> 
       </tr> 
     </thead> 
  </table> 

JS:

var currPageIndex = 0; 
    var currLimit = 10; 
 
    $(function () { 
      $("#dataShow").bootstrapTable({ 
        url: "TradHandler.ashx?request=getTradList", 
        sortName: "rkey",//排序列 
        striped: true,//條紋行 
        sidePagination: "server",//服務器分頁 
        //showRefresh: true,//刷新功能 
        //search: true,//搜索功能 
        clickToSelect: true,//選擇行即選擇checkbox 
        singleSelect: true,//僅允許單選 
        //searchOnEnterKey: true,//ENTER鍵搜索 
        pagination: true,//啟用分頁 
        escape: true,//過濾危險字符 
        queryParams: getParams,//攜帶參數 
        pageCount: 10,//每頁行數 
        pageIndex: 0,//其實頁 
        method: "get",//請求格式 
        //toolbar: "#toolBar", 
        onPageChange: function (number, size) { 
          currPageIndex = number; 
          currLimit = size 
        }, 
        onLoadSuccess: function () 
        { 
          $("#searchBtn").button('reset'); 
        } 
      }); 
 
      //搜索 
      $("#searchBtn").click(function () { 
        $(this).button('loading'); 
        var nullparamss = {}; 
        $("#dataShow").bootstrapTable("refresh", nullparamss); 
         
      }); 
      //enter鍵搜索 
      $("#searchKey").keydown(function (event) { 
        if (event.keyCode == 13) 
        { 
          $("#searchBtn").click(); 
        } 
      }); 
      //阻止enter鍵提交表單 
      $("#mainForm").submit(function () { 
        return false; 
      }); 
 
       
    }); 
    //默認加載時攜帶參數 
    function getParams(params) { 
      var searchKey = $("#searchKey").val(); 
      return { bysex: 1, limit: params.limit, offset: params.offset, search: searchKey }; 
    } 

TradHandler.ashx:

/// <summary> 
    /// 獲取批量數據示例 
    /// </summary> 
    /// <param name="context"></param> 
    private void getTradList(HttpContext context) 
    { 
      //用于序列化實體類的對象 
      JavaScriptSerializer jss = new JavaScriptSerializer(); 
 
      #region 模擬數據獲取 
      List<SimpleModel> list = new List<SimpleModel>(); 
      for (int i = 0; i < 1000; i++) 
      { 
        list.Add(new SimpleModel() { age = 18, name = "小李" + i, rkey = i + 1, sex = "男" }); 
      } 
 
 
      //請求中攜帶的條件 
      string bysex = context.Request.Params["bysex"]; 
      string searchKey = context.Request.Params["search"]; 
 
      //請求中攜帶的頁數和下標 
      int dataIndex = Convert.ToInt32(context.Request.Params["offset"]); 
      int pageCount = Convert.ToInt32(context.Request.Params["limit"]); 
 
      //查詢滿足條件的數據 
      List<SimpleModel> getList; 
      if (bysex != null && searchKey != null) 
      { 
        getList = (from p in list 
              where p.sex == (bysex == "0" ? "女" : "男") && p.name.Contains(searchKey.Trim()) 
              select p).ToList(); 
      } 
      else 
      { 
        getList = list; 
      } 
      #endregion 
 
      //將結果增加一列序號列 
      Dictionary<int, SimpleModel> testModel = new Dictionary<int, SimpleModel>(); 
      for (int i=0;i< getList.Count;i++) 
      { 
        testModel.Add(i + 1, getList[i]); 
      } 
       
      //給分頁實體賦值 
      PageModels<SimpleModel> model = new PageModels<SimpleModel>(); 
      model.total = getList.Count; 
      if (getList.Count % pageCount == 0) 
        model.page = getList.Count / pageCount; 
      else 
        model.page = (getList.Count / pageCount) + 1; 
 
      //獲取對應頁的數據 
      model.rows = testModel.Where(t => t.Key > dataIndex && t.Key <= dataIndex + pageCount).Select(t => t.Value).ToList(); 
 
      //將查詢結果返回 
      context.Response.Write(jss.Serialize(model)); 
    } 

有同學問pagemodel實體類,這里也分享一下,泛型實體類,因為該插件需要這些屬性才能正常自動綁定

[Serializable] 
  public class TablePageModel<T> 
  { 
    /// <summary> 
    /// 總行數 
    /// </summary> 
    public long total { get; set; } 
 
    /// <summary> 
    /// 總頁數 
    /// </summary> 
    public int page { get; set; } 
 
    private List<T> _rows; 
    /// <summary> 
    /// 數據源 
    /// </summary> 
    public List<T> rows 
    { 
      get 
      { 
        if (_rows == null) 
          _rows = new List<T>(); 
        return _rows; 
      } 
      set 
      { 
        _rows = value; 
      } 
    } 
  } 

展示數據結果如下:

bootstrap Table插件使用demo 

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持億速云。

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

金沙县| 濉溪县| 衡阳县| 古田县| 徐闻县| 尚志市| 万全县| 陵水| 湖南省| 桓台县| 台北县| 金堂县| 将乐县| 大渡口区| 通山县| 日喀则市| 景泰县| 诸暨市| 文安县| 乌拉特前旗| 金溪县| 石嘴山市| 昆山市| 苏尼特左旗| 巴东县| 淮阳县| 青阳县| 余江县| 永州市| 洛宁县| 福建省| 灵台县| 新龙县| 博爱县| 海宁市| 大荔县| 武夷山市| 玉屏| 沐川县| 武乡县| 惠州市|