一、前言

       新年新气象,转眼今年就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 = ;
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
}
}

官方文档:

http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/

三、结尾

       以后会持续更新关于BootStrap的相关内容!

【BootStrap】Table的基本使用的更多相关文章

  1. BootStrap table使用

    bootstrap table git address https://github.com/wenzhixin/bootstrap-table 引入文件 <link rel="sty ...

  2. bootstrap Table 中给某一特定值设置table选中

    bootstrap Table 中给某一特定值设置table选中 需求: 如图所示:左边地图人员选定,右边表格相应选中. 功能代码: //表格和图标联动 function changeTableSel ...

  3. JS组件系列——表格组件神器:bootstrap table

    前言:之前一直在忙着各种什么效果,殊不知最基础的Bootstrap Table用法都没有涉及,罪过,罪过.今天补起来吧.上午博主由零开始自己从头到尾使用了一遍Bootstrap Table ,遇到不少 ...

  4. JS组件系列——表格组件神器:bootstrap table(二:父子表和行列调序)

    前言:上篇 JS组件系列——表格组件神器:bootstrap table 简单介绍了下Bootstrap Table的基础用法,没想到讨论还挺热烈的.有园友在评论中提到了父子表的用法,今天就结合Boo ...

  5. JS组件系列——表格组件神器:bootstrap table(三:终结篇,最后的干货福利)

    前言:前面介绍了两篇关于bootstrap table的基础用法,这章我们继续来看看它比较常用的一些功能,来个终结篇吧,毛爷爷告诉我们做事要有始有终~~bootstrap table这东西要想所有功能 ...

  6. JS组件系列——Bootstrap Table 冻结列功能IE浏览器兼容性问题解决方案

    前言:最近项目里面需要用到表格的冻结列功能,所谓“冻结列”,就是某些情况下表格的列比较多,需要固定前面的几列,后面的列滚动.遗憾的是,bootstrap table里自带的fixed column功能 ...

  7. JS组件系列——Bootstrap Table 表格行拖拽

    前言:之前一直在研究DDD相关知识,好久没更新JS系列文章了.这两天做了一个简单的业务需求,觉得效果还可以,今天在这里分享给大家,欢迎拍砖~~ 一.业务需求及实现效果 项目涉及到订单模块,那天突然接到 ...

  8. JS组件系列——Bootstrap Table 表格行拖拽(二:多行拖拽)

    前言:前天刚写了篇JS组件系列——Bootstrap Table 表格行拖拽,今天接到新的需要,需要在之前表格行拖拽的基础上能够同时拖拽选中的多行.博主用了半天时间研究了下,效果是出来了,但是感觉不尽 ...

  9. 后台系统组件:一丶bootstrap table

    http://www.cnblogs.com/landeanfen/p/4976838.html (bootstrap table) http://www.cnblogs.com/landeanfen ...

  10. Bootstrap Table Examples

    The examples of bootstrap table http://bootstrap-table.wenzhixin.net.cn/examples/ http://www.jq22.co ...

随机推荐

  1. Jenkins服务器维护

    Jenkins服务器维护 以下是一些基本的活动,一些是对 Jenkins 服务器维护的最佳实践 URL选项 在 Jenkins 实例 URL 有以下命令将开展对Jenkins实例的相关动作. http ...

  2. Revit开发小技巧-连接类

    该类用来连接两个Element.备注一下防止忘记.

  3. 关于matlab向文件写入数据的方法——留着备用

    MATLAB数据采集的时候,往往需要把得到的数据保存下来. fid = fopen(文件名,‘打开方式’): 说明:fid用于存储文件句柄值,如果fid>0,这说明文件打开成功.打开方式有如下选 ...

  4. 统计学习方法c++实现之七 提升方法--AdaBoost

    提升方法--AdaBoost 前言 AdaBoost是最经典的提升方法,所谓的提升方法就是一系列弱分类器(分类效果只比随机预测好一点)经过组合提升最后的预测效果.而AdaBoost提升方法是在每次训练 ...

  5. AI 启蒙-无人售货机智能找零算法

    人的理想志向往往和他的能力成正比. --约翰逊--  AI 启蒙-无人售货机智能找零算法  [问题区] 你现在是一家无人售货机生产公司的高级程序员,技术经理叫你实现无人售货机智能找零钱的算法,具体需求 ...

  6. Mysql Mariadb 密码问题

    mysql密码遗忘和登陆报错问题   mysql登录密码忘记,其实解决办法很简单,只需要在mysql的主配置文件my.cnf里添加一行“跳过授权表”的参数选择即可! 在my.cnf中添加下面一行:[r ...

  7. windows c++如何使窗口动态改变位置

    在windows软件中,经常会碰到一个功能:鼠标hover在某个地方时会出现窗口,有时候这个窗口的位置是会动态调整的. 熟悉使用windows API,理解windows中虚拟坐标.工作区坐标.屏幕坐 ...

  8. 从零开始的Python学习Episode 19——面向对象(2)

    面向对象之继承 继承是一种创建新类的方式,新建的类可以继承一个或多个父类(python支持多继承),父类又可称 为基类或超类,新建的类称为派生类或子类. 子类会“”遗传”父类的属性,从而解决代码重用问 ...

  9. (转)Django 数据库

         转:https://blog.csdn.net/ayhan_huang/article/details/77575186      目录 数据库说明 配置数据库 在屏幕输出orm操作对应的s ...

  10. oraclejdbc

    https://segmentfault.com/q/1010000004952621/a-1020000004955600