bootstrap Table动态绑定数据并自定义字段显示值
第一步:我们在官网下载了bootstrap 的文档,并在项目中引入bootstrap table相关js文件,当然,也要记得引入jquery文件
大概如图:
第二步:定义一个table控件
第三步:js绑定数据
<script> $(function () {
initTable();
}) //初始化表格
function initTable() { //先销毁表格 $("#userTable").bootstrapTable('destroy'); $("#userTable").bootstrapTable({ method: "get",
url: "/userManagement/UserData",//请求路径
striped: true,//表格显示条纹
pagination: true,//是否显示分页
pageSize: ,
pageNumber: ,
pageList: [, , , , ],
showColumns: true,
showRefresh: true,//是否显示刷新按钮
sidePagination: "server",//表示从服务端获取数据 --必须有
queryParamsType: "undefined",//定义参数类型
clickToSelect: true,
queryParams: function (params) {
var param = { pageIndex: params.pageNumber,
pageSize: params.pageSize
}; return param; },
columns: [{
aligin: 'center',
checkbox: true,//显示复选框
},
{
field: 'userId',
title: '#',
align: 'center',
visible: true,
},
{
field: 'userName',
title: '昵称',
align: 'center',
},
{
field: 'userPwd',
title: '密码',
align: 'center',
},
{
field: 'userTel',
title: '电话',
align: 'center',
},
{
field: 'email',
title: '邮箱',
align: 'center',
},
{
field: 'userImg',
title: '头像',
align: 'center',
},
{
field: 'createTime',
title: '注册时间',
//获取日期列的值进行转换
formatter: function (value, row, index) {
return changeDateFormat(value)
},
align: 'center',
},
{
field: 'lastTime',
title: '最后更新时间',
//获取日期列的值进行转换
formatter: function (value, row, index) {
return changeDateFormat(value)
},
align: 'center',
},
{
field: 'isAble',
title: '是否可用',
formatter : function (value, row, index) {
if (row['isAble'] === ) {
return '正常';
}
if (row['isAble'] === ) {
return '禁用';
}
return value;
},
align: 'center', },
{
field: 'isLine',
title: '是否在线',
formatter: function (value, row, index) {
if (row['isLine'] === ) {
return '在线';
}
if (row['isLine'] === ) {
return '下线';
}
return value;
},
align: 'center',
},
{
field: 'remark',
title: '备注信息',
align: 'center',
}],
onLoadSuccess: function (data) {
console.log(data); },
onLoadError: function (data) {
console.log(data);
}
}) $("#add").click(function ()
{
$("#myModal").modal('show');
})
$("#edit").click(function () {
$("#myModal").modal('show');
})
$("#close").click(function () {
$("#myModal").modal('hide');
});
} //转换日期格式(时间戳转换为datetime格式)
function changeDateFormat(cellval) {
var dateVal = cellval + "";
if (cellval != null) {
var date = new Date(parseInt(dateVal.replace("/Date(", "").replace(")/", ""), ));
var month = date.getMonth() + < ? "" + (date.getMonth() + ) : date.getMonth() + ;
var currentDate = date.getDate() < ? "" + date.getDate() : date.getDate(); var hours = date.getHours() < ? "" + date.getHours() : date.getHours();
var minutes = date.getMinutes() < ? "" + date.getMinutes() : date.getMinutes();
var seconds = date.getSeconds() < ? "" + date.getSeconds() : date.getSeconds(); return date.getFullYear() + "-" + month + "-" + currentDate + " " + hours + ":" + minutes + ":" + seconds;
}
} </script>
js绑定数据
第四步:得到数据库数据
/// <summary>
/// 用户数据列表
/// </summary>
/// <param name="pageIndex"></param>
/// <param name="pageSize"></param>
/// <returns></returns>
public ActionResult UserData(int pageIndex=,int pageSize=)
{
EFHelper<FileDBEntities> fileDB = new EFHelper<FileDBEntities>();
var result = fileDB.GetList<userInfo>();
var dataList = (from user in result
orderby user.userId
select new
{
user.userId,
user.userName,
user.userPwd,
user.userTel,
user.email,
user.userImg,
user.createTime,
user.lastTime,
user.isAble,
user.isLine,
user.remark
}).Skip(pageSize * (pageIndex - )).Take(pageSize);
long totalCount = result.Count();
var jsonResult = new { total = totalCount, rows = dataList };
return Json(jsonResult, JsonRequestBehavior.AllowGet); }
得到数据库数据源
显示效果如图:
备注:如果表内有外键关系,可直接查询,无需连表,如图
js绑定数据如下图:
bootstrap Table动态绑定数据并自定义字段显示值的更多相关文章
- bootstrap table 获取数据后的前台页面(后台怎么传就不必详细说明了吧)
<%@ page contentType="text/html;charset=UTF-8" language="java" %> <%@ t ...
- [转]bootstrap table本地数据使用方法
原文地址:http://www.giserdqy.com/language/h5/bootstrap/1136 data对应columns进行组合 var columns = [ { field: ' ...
- 27)django-form操作示例(动态Select数据,自定义字段验证,全局验证等)
1)普通传递select数据 # -*- coding:utf-8 -*- __author__ = 'shisanjun' from django import forms from django. ...
- bootstrap table load数据
直接load数据: $("#button").click(function(){ var name=$("input[name='name']").val(); ...
- 表格组件神器:bootstrap table详细使用指南
1.bootstrap-table简介 1.1.bootstrap table简介及特征: Bootstrap table是国人开发的一款基于 Bootstrap 的 jQuery 表格插件,通过简单 ...
- 新的表格展示利器 Bootstrap Table
1.bootstrap table简介及特征 Bootstrap Table是国人开发的一款基于 Bootstrap 的 jQuery 表格插件,通过简单的设置,就可以拥有强大的单选.多选.排序.分 ...
- 新的表格展示利器 Bootstrap Table Ⅰ
1.bootstrap table简介及特征 Bootstrap Table是国人开发的一款基于 Bootstrap 的 jQuery 表格插件,通过简单的设置,就可以拥有强大的单选.多选.排序.分 ...
- Bootstrap Table使用分享
版权声明:本文为博主原创文章,未经博主允许不得转载. 最近客户提出需求,想将原有的管理系统,做下优化,通过手机也能很好展现,想到2个方案: a方案:保留原有的页面,新设计一套适合手机的页面,当手机访问 ...
- bootstrap table 服务器端分页--ashx+ajax
1.准备静态页面 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-T ...
随机推荐
- 【数据库】8.0 MySQL入门学习(八)——创建并使用数据库、获得数据库和表的信息
1.0 使用SHOW语句找出服务器上当前存在什么数据库: mysql> SHOW DATABASES; 每台机器上的数据库列表是不同的,但是很可能有mysql和test数据库.mysql是必需的 ...
- .NET开源工作流RoadFlow-表单设计-单选按钮组
单选按钮组即:<input type='checkbox'/>控件: 绑定字段:与数据表的某个字段绑定. 数据源: 1.数据字典:在下面字段项中选择对应在数据字典项. 2.自定义:自己输入 ...
- 转:ArcInfo数据格式介绍
ArcInfo常用以下格式的数据:shp.Coverage..Raster CAD和Geodatabase.各种数据的组织形式不一样,其中shp.Coverage.Raster.CAD为文件类型,Ge ...
- Azure 11 月新公布
Azure 11 月新发布:Apple FairPlay Streaming, 应用服务(App Service), 虚拟机规模集(VMSS) Azure 媒体服务的 Apple FairPlay S ...
- Python模块 Socket
一个简单的python socket编程 一.套接字 套接字是为特定网络协议(例如TCP/IP,ICMP/IP,UDP/IP等)套件对上的网络应用程序提供者提供当前可移植标准的对象.它们允许程序接受并 ...
- 一键生成http服务器
如果你想用最简单的方法在内网共享目录,可以考虑为要共享的目录生成一个http服务器,这样就可以在内网任一台设备打开浏览器就可以浏览了.简单举几个例,有了这个http服务器就可以: 在手机浏览器里观看电 ...
- spring boot拦截器配置
1.在spring boot配置文件application.properties中添加要拦截的链接 com.url.interceptor=/user/test 2.编写拦截器代码 ,创建UrlInt ...
- May 29th 2017 Week 22nd Monday
I figure life is a gift and I don't intend on wasting it. 我觉得生命是一份礼物,我不想浪费它. It seems that I didn't ...
- selenium启动不了浏览器或者启动后不会写入网址,先更新下浏览器驱动
平时自动化习惯用Chrome浏览器.有几个月没用selenium启动IE和Firefox,今天跑兼容性测试,需要验证其他浏览器.结果遇到两个异常: 1 IE启动不了,直接报错. 2 Firefox启动 ...
- IOS 远程推送通知(UIRemoteNotification)
● 什么是远程推送通知 ● 顾名思义,就是从远程服务器推送给客户端的通知(需要联网) ● 远程推送服务,又称为APNs(Apple Push Notification Services) ● ...