【BootStrap】Table的基本使用

2018-02-23 21:18:18来源:cnblogs.com作者:airforce094人点击

分享

一、前言

       新年新气象,转眼今年就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的相关内容!

最新文章

123

最新摄影

闪念基因

微信扫一扫

第七城市微信公众平台