未加星标

bootstrap Table插件使用demo

字体大小 | |
[前端(javascript) 所属分类 前端(javascript) | 发布者 店小二03 | 时间 | 作者 红领巾 ] 0人收藏点击收藏
最近研究bootstrap,它仅提供视觉效果,对于数据列表之类的并未涉及,网上找了一下,找到一个Table插件。
名为bootstrapTable。
官方地址:http://bootstrap-table.wenzhixin.net.cn/examples/
github:https://github.com/wenzhixin/bootstrap-table

因为英文差,研究了半天,做了一个demo,将就看

HTML: 

<table class="table" id="dataShow" >
<thead>
<tr>
<th data-checkbox="true">选择</th>
<th data-field="rkey">供应商名称</th>
<th data-field="rkey">供应商编码</th>
<th data-field="name">物料编码</th>
<th data-field="sex">申请类型</th>
<th data-field="birthdayString">试用申请编码</th>
<th data-field="age">试用状态</th>
<th data-field="age">厂别</th>
<th data-field="age">审批状态</th>
<th data-field="birthday">申请时间</th>
<th data-field="age">试用结果</th>
</tr>
</thead>
</table>
JS:

var currPageIndex = 0;
var currLimit = 10;

$(function () {
$("#dataShow").bootstrapTable({
url: "TradHandler.ashx?request=getTradList",
sortName: "rkey",//排序列
striped: true,//ly行
sidePagination: "server",//服务器分页
//showRefresh: true,//刷新功能
//search: true,//搜索功能
clickToSelect: true,//选择行即选择checkbox
singleSelect: true,//仅允许单选
//searchOnEnterKey: true,//ENTER键搜索
pagination: true,//启用分页
escape: true,//过滤危险字符
queryParams: getParams,//携带参数
pageCount: 10,//每页行数
pageIndex: 0,//其实页
method: "get",//请求格式
//toolbar: "#toolBar",
onPageChange: function (number, size) {
currPageIndex = number;
currLimit = size
},
onLoadSuccess: function ()
{
$("#searchBtn").button('reset');
}
});

//搜索
$("#searchBtn").click(function () {
$(this).button('loading');
var nullparamss = {};
$("#dataShow").bootstrapTable("refresh", nullparamss);

});
//enter键搜索
$("#searchKey").keydown(function (event) {
if (event.keyCode == 13)
{
$("#searchBtn").click();
}
});
//阻止enter键提交表单
$("#mainForm").submit(function () {
return false;
});


});
//默认加载时携带参数
function getParams(params) {
var searchKey = $("#searchKey").val();
return { bysex: 1, limit: params.limit, offset: params.offset, search: searchKey };
}
TradHandler.ashx:

/// <summary>
/// 获取批量数据示例
/// </summary>
/// <param name="context"></param>
private void getTradList(HttpContext context)
{
//用于序列化实体类的对象
javascriptSerializer jss = new JavaScriptSerializer();

#region 模拟数据获取
List<SimpleModel> list = new List<SimpleModel>();
for (int i = 0; i < 1000; i++)
{
list.Add(new SimpleModel() { age = 18, name = "小李" + i, rkey = i + 1, sex = "男" });
}


//请求中携带的条件
string bysex = context.Request.Params["bysex"];
string searchKey = context.Request.Params["search"];

//求中yУ捻岛拖
int dataIndex = Convert.ToInt32(context.Request.Params["offset"]);
int pageCount = Convert.ToInt32(context.Request.Params["limit"]);

//查询满足条件的数据
List<SimpleModel> getList;
if (bysex != null && searchKey != null)
{
getList = (from p in list where p.sex == (bysex == "0" ? "女" : "男") && p.name.Contains(searchKey.Trim()) select p).ToList();
}
else
{
getList = list;
}
#endregion

//将结果增加一列序号列
Dictionary<int, SimpleModel> testModel = new Dictionary<int, SimpleModel>();
for (int i=0;i< getList.Count;i++)
{
testModel.Add(i + 1, getList[i]);
}

//给分页实体赋值
PageModels<SimpleModel> model = new PageModels<SimpleModel>();
model.total = getList.Count;
if (getList.Count % pageCount == 0)
model.page = getList.Count / pageCount;
else
model.page = (getList.Count / pageCount) + 1;

//@取的
model.rows = testModel.Where(t => t.Key > dataIndex && t.Key <= dataIndex + pageCount).Select(t => t.Value).ToList();

//将查询结果返回
context.Response.Write(jss.Serialize(model));
}
有同学问pagemodel实体类,这里也分享一下,泛型实体类,因为该插件需要这些属性才能正常自动绑定

[Serializable]
public class TablePageModel<T>
{
/// <summary>
/// 行
/// </summary>
public long total { get; set; }

/// <summary>
/// 总页数
/// </summary>
public int page { get; set; }

private List<T> _rows;
/// <summary>
/// 源
/// </summary>
public List<T> rows
{
get
{
if (_rows == null)
_rows = new List<T>();
return _rows;
}
set
{
_rows = value;
}
}
}

展示数据结果如下:

bootstrap Table插件使用demo
 

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

分页:12
转载请注明
本文标题:bootstrap Table插件使用demo
本站链接:http://www.codesec.net/view/561163.html
分享请点击:


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(63)