【BootStrap】Table的基本使用
2018-06-24 02:16:38来源:未知 阅读 ()
一、前言
新年新气象,转眼今年就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
}
}
官方文档:
http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/
三、结尾
以后会持续更新关于BootStrap的相关内容!
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
- HTML开发实例-简单相亲网站开发(主体为table) 2020-05-27
- Replace HTML Table with Divs 2020-04-30
- How to Create Responsive Tables using CSS without &l 2020-04-30
- Bootstrap 滚动监听+小工具+Flex(弹性)布局+多媒体对象 2020-04-20
- Bootstrap4 轮播+模态框+提示框+弹出框 2020-04-16
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash