【BootStrap】Table的基本使用

一、前言

       新年新氣象，轉眼今年就28了，不知道今年能不能把妹成功呢？哈哈哈！上班第一天，部門Web技術主管給每個同事都發了紅包鼓勵大家今年加油，我作為新轉入部門員工不能給團隊掉鏈子，要加緊學習跟上隊伍。大家都下班了，我安安靜靜總結之前BootStrap的知識內容。

二、內容

<div>
 <table id="ExampleTable" data-toggle="table" class="table table-hover"
        data-url="/api/Controller/Action"
        data-method="post"              //Post方式獲取數據
        data-side-pagination="server"   //伺服器分頁
        data-pagination="true"          //是否支持分頁
        data-query-params-type=""       //如果支持RestFul需要寫'limit'
        data-query-params = qcondition> //查詢條件
     <thead>
         <tr>
             <th data-field="field1" data-valign="middle">欄位1</th>
             <th data-field="field2" data-valign="middle" data-class="field2-class" data-formatter="Formatfield2"  data-events="operateField2Events">欄位2</th>
             <th data-formatter="FormatItem3"  data-valign="middle">項目3</th>
         </tr>
     </thead>      
</table>
</div>

BootStrap的<table>標簽：

主要說明的是data-query-params這個屬性，它是用來對獲取到的伺服器數據進行篩選的，我們可以在js中這麼寫：

var qcondition = function (params) {
   var temp = {
        FilterText: filterValue,
        Condition: params.searchText,
        PageSize: params.pageSize,
        PageIndex: params.pageNumber - 1
    };
    return temp;
};

那麼在Controller中，我們就需要根據qcondition獲取相應的數據：

public class QueryDataInfo
{   
    public string FilterText { get; set; }
    public string Condition { get; set; }
    public int PageIndex { get; set; }
    public int PageSize { get; set; }
}

[HttpPost]
public HttpResponseMessage Action(QueryDataInfo dataInfo)
{
     long recordCount = 0;
     IList<DataInfo> list = Query(dataInfo, out recordCount);
     return ResultJson.BuildJsonResponse(new { total = recordCount, rows = list }, MessageType.None, string.Empty);
}

public IList<DataInfo> Query(QueryDataInfo dataInfo, out long recordCount)
{
     IList<DataInfo> list = new List<DataInfo>();
     string[] includePath = {"ForeignKey"};    
     list = DataRepository.LoadPageList(out recordCount, 
                                        dataInfo.PageIndex * dataInfo.PageSize, 
                                        dataInfo.PageSize,
                                        d => d.Text == dataInfo.FilterText,
                                        o => o.ID, 
                                        false, 
                                        includePath);    
     return list;
}


//以下代碼寫在基抽象類中
public IList<TEntity> LoadPageList<TKey>(out long count, 
                                         int pageIndex, 
                                         int pageSize, 
                                         Expression<Func<TEntity, bool>> expression = null, 
                                         Expression<Func<TEntity, TKey>> orderBy = null, 
                                         bool ascending = true, 
                                         params string[] includePath)
{
     IQueryable<TEntity> defaultQuery = Query(expression, 
                                              includePath);
     if (orderBy != null)
     {
        if (ascending)
            defaultQuery = defaultQuery.OrderBy(orderBy);
        else
            defaultQuery = defaultQuery.OrderByDescending(orderBy);
     }
     count = defaultQuery.Count();
     defaultQuery = defaultQuery.Skip(pageIndex).Take(pageSize);
     return defaultQuery.ToList();
}

public IQueryable<TEntity> Query(Expression<Func<TEntity, bool>> expression = null, 
                                 params string[] includePath)
{
     IQueryable<TEntity> defaultQuery = mobjContext.Context.Set<TEntity>();
     if (includePath != null)
     {
        foreach (string path in includePath)
        {
             if (!string.IsNullOrEmpty(path))
             {
                  defaultQuery = defaultQuery.Include(path);
             }
         }
     }

     if (expression != null)
         defaultQuery = defaultQuery.Where(expression);
     return defaultQuery;
}

BootStrap的<th>標簽：

data-field: 數據欄位，對應返回的對象中的欄位。

data-class: 該<th>標簽的class，一般用於該列的自定義css樣式

<style>
    .field2-class {
        min-height: 0px;
    }
</style>

data-formatter: 對該列數據進行格式上的變化

function Formatfield2(value, row, index) {
    return '<span class="link-name item-name">' + row.Name + '</span><input type="hidden" class="hiddenRowid" value='+row.ID+' />';
}

data-events:  該列數據事件，如點擊該列的某個欄位會發生何種事件

window.operateField2Events = {
    'click .class-name': function (e, value, row, index) {     
        //do something
    }
}

三、結尾

       以後會持續更新關於BootStrap的相關內容！