【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 = ;
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的基本使用的更多相关文章
- BootStrap table使用
bootstrap table git address https://github.com/wenzhixin/bootstrap-table 引入文件 <link rel="sty ...
- bootstrap Table 中给某一特定值设置table选中
bootstrap Table 中给某一特定值设置table选中 需求: 如图所示:左边地图人员选定,右边表格相应选中. 功能代码: //表格和图标联动 function changeTableSel ...
- JS组件系列——表格组件神器:bootstrap table
前言:之前一直在忙着各种什么效果,殊不知最基础的Bootstrap Table用法都没有涉及,罪过,罪过.今天补起来吧.上午博主由零开始自己从头到尾使用了一遍Bootstrap Table ,遇到不少 ...
- JS组件系列——表格组件神器:bootstrap table(二:父子表和行列调序)
前言:上篇 JS组件系列——表格组件神器:bootstrap table 简单介绍了下Bootstrap Table的基础用法,没想到讨论还挺热烈的.有园友在评论中提到了父子表的用法,今天就结合Boo ...
- JS组件系列——表格组件神器:bootstrap table(三:终结篇,最后的干货福利)
前言:前面介绍了两篇关于bootstrap table的基础用法,这章我们继续来看看它比较常用的一些功能,来个终结篇吧,毛爷爷告诉我们做事要有始有终~~bootstrap table这东西要想所有功能 ...
- JS组件系列——Bootstrap Table 冻结列功能IE浏览器兼容性问题解决方案
前言:最近项目里面需要用到表格的冻结列功能,所谓“冻结列”,就是某些情况下表格的列比较多,需要固定前面的几列,后面的列滚动.遗憾的是,bootstrap table里自带的fixed column功能 ...
- JS组件系列——Bootstrap Table 表格行拖拽
前言:之前一直在研究DDD相关知识,好久没更新JS系列文章了.这两天做了一个简单的业务需求,觉得效果还可以,今天在这里分享给大家,欢迎拍砖~~ 一.业务需求及实现效果 项目涉及到订单模块,那天突然接到 ...
- JS组件系列——Bootstrap Table 表格行拖拽(二:多行拖拽)
前言:前天刚写了篇JS组件系列——Bootstrap Table 表格行拖拽,今天接到新的需要,需要在之前表格行拖拽的基础上能够同时拖拽选中的多行.博主用了半天时间研究了下,效果是出来了,但是感觉不尽 ...
- 后台系统组件:一丶bootstrap table
http://www.cnblogs.com/landeanfen/p/4976838.html (bootstrap table) http://www.cnblogs.com/landeanfen ...
- Bootstrap Table Examples
The examples of bootstrap table http://bootstrap-table.wenzhixin.net.cn/examples/ http://www.jq22.co ...
随机推荐
- MySQL事务及其实现
事务定义 事务是访问并更新数据库中各个数据项的一个程序执行单元.在事务操作中,要不都做修改,要么都不做. 事务特性 事务具有ACID四个特性,分别是:原子性(Atomicity).一致性(Consis ...
- 执行caffe的draw_net.py出现“GraphViz's executable "dot" not found”的解决方法
控制台输入如下指令画网络图: python ../../../python/draw_net.py train.prototxt train.png --rankdir=TB (Top-Bottom形 ...
- TPO-21 C1 Find a building for orientation
TPO-21 C1 Find a building for orientation 第 1 段 1.Listen to a conversation between a student and a p ...
- MyCat安装与测试教程 超详细!
MyCat安装与测试教程 超详细! MyCat基础知识 一.什么是MYCAT? 1. 一个彻底开源的,面向企业应用开发的大数据库集群 2. 支持事务.ACID.可以替代MySQL的加强版数据库 3. ...
- 富文本(wangEditor框架)的使用教程
富文本的使用教程(wangEditor框架) 一,相信很多人用过很多富文本的框架,现在我向大家推荐一个很实用的一个富文本框架,具有丰富的功能项,容易使用. 所以本博客介绍这个富文本编辑器的使用哈!觉得 ...
- mac 上面安装 tree 命令
相信很多使用过Linux的用户都用过tree命令,它可以像windows的文件管理器一样清楚明了的显示目录结构. 但是mac下默认是没有 tree命令的. 1.我们可以使用find命令模拟出tree命 ...
- oracle varchar2改成大字段类型clob,读取大字段内容
http://blog.csdn.net/cai7095576/article/details/23999549
- [BUAA OO]第四次博客作业
一. 测试与正确性论证的区别 在最后一个单元的OO作业中,我们主要进行了代码的测试与正确性论证工作.这俩者在作业中的体现分别是junit单元测试以及jsf论述语言.这两者在java代码开 ...
- 20162319 实验四 Android程序设计
Android Stuidio的安装测试: 完成Hello World, 要求修改res目录中的内容,Hello World后要显示自己的学号 ·实验过程 完成任务一,只需在Android应用程序文件 ...
- C++编译与链接(1)-编译与链接过程
大家知道计算机使用的一系列的1和0 那个一个C++语言程序又是如何从一个个.h和.cpp文件变成包含1和0的可执行文件呢? 可以认为有以下的几个环节 源程序->预处理->编译和优化-> ...