做CRM或其他后台系统 ,必需至少掌握一个前端框架。
之前学习使用EASYUI写了一个小系统 ,感觉还蛮好用的,就是外观不太好看。
所以现在学习主流的响应式框架 Bootstrap。感觉外观还真是变好看的~哈
1.引用JS 使用的是 bootstrap-3.3.5-dist
2.引用table插件 bootstrap-table.js(谷歌搜索下就有~)
3.引用paginator插件 bootstrap-paginator.js(谷歌搜索下就有~)
前端代码如下:
TableTest2
后端请求代码:
[HttpPost]
public JsonResult tablePost3(string searchText="",string sortName ="",string sortOrder="desc",int pageSize = 10, int pageNumber = 1)
{
//1.排序
//2.字段排序
//3.搜索关键字
var db = new QHC_IIMSContext();
List proList = null;
if (sortOrder == "desc")
{
//desc 降序
proList = db.T_Product.OrderByDescending(t => t.ID).Skip((pageNumber - 1) * pageSize).Take(pageSize).ToList();
}
else
{
//asc 升序
proList = db.T_Product.OrderBy(t => t.ID).Skip((pageNumber - 1) * pageSize).Take(pageSize).ToList();
}
//获取数据库总条数
int total = db.T_Product.Count();
//匿名list 可以筛
var newList = proList.Select(t => new { ID = t.ID, Sku = t.Sku, ProductName = t.ProductName, Price = t.Price, Descrtiption = t.Descrtiption }).ToList();
var json = new { total = total, rows = newList };
return Json(json, JsonRequestBehavior.AllowGet);
}
前端显示 时,注意JSON中的数据的大小写问题
点击排序SKU,提交请求
返回结果:



