bootstrap Table插件使用demo

bootstrap Table插件使用demo

最近研究bootstrap，它仅提供视觉效果，对于数据列表之类的并未涉及，网上找了一下，找到一个Table插件。

名为bootstrapTable。

官方地址：http://bootstrap-table.wenzhixin.net.cn/examples/

github:https://github.com/wenzhixin/bootstrap-table

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

HTML:

厂别

厂别

js:

var currPageIndex = 0;

var currLimit = 10;

$(function () {

$("#dataShow").bootstrapTable({

url: "TradHandler.ashx?request=getTradList",

sortName: "rkey",//排序列

striped: true,//條紋行

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：

///

/// 获取批量数据示例

///

///

private void getTradList(HttpContext context)

{

//用于序列化实体类的对象

javascriptSerializer jss = new javaScriptSerializer();

#region 模拟数据获取

List list = new List();

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"];

//請求中攜帶的頁數和下標

int dataIndex = Convert.ToInt32(context.Request.Params["offset"]);

int pageCount = Convert.ToInt32(context.Request.Params["limit"]);

//查询满足条件的数据

List 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 testModel = new Dictionary();

for (int i=0;i< getList.Count;i++)

{

testModel.Add(i + 1, getList[i]);

}

//给分页实体赋值

PageModels model = new PageModels();

nUFzlCmodel.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

{

///

/// 總行數

///

public long total { get; set; }

///

/// 总页数

///

public int page { get; set; }

private List _rows;

///

/// 數據源

///

public List rows

{

get

{

if (_rows == null)

_rows = new List();

return _rows;

}

set

{

_rows = value;

}

}

}

展示数据结果如下：

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。