bootstrap-table下载地址:https://github.com/wenzhixin/bootstrap-table/
先来看一张效果图:
& lt; !——引导比;
& lt;链接的href=" https://www.yisu.com/zixun/$ {contextPath}/静态引导/css/bootstrap.min。css " rel="外部nofollow”
rel="样式表"比;
& lt;链接的href=" https://www.yisu.com/zixun/$ {contextPath}/静态引导/表/bootstrap-table。css " rel="外部nofollow”
rel="样式表"比;之前
需要导入的js:除了引导的js跟表的js外第一个要导入的就是jQuery的js,他们都是基于jQuery开发的
& lt; !——jQuery(引导所需的JavaScript插件)——比;
& lt;脚本src=" https://www.yisu.com/zixun/$ {contextPath}/静态/jquery/jquery.min.js”祝辞& lt;/script>
& lt; !——包括所有编译插件(下图),或者根据需要包括单个文件——比;
& lt;脚本src=" https://www.yisu.com/zixun/$ {contextPath}/静态引导/js/bootstrap.min.js”祝辞& lt;/script>
& lt;脚本src=" https://www.yisu.com/zixun/$ {contextPath}/静态引导/表/bootstrap-table.js”祝辞& lt;/script>
& lt;脚本src=" https://www.yisu.com/zixun/$ {contextPath}/静态/引导/表/地区/bootstrap-table-zh-CN.js”祝辞& lt;/script>之前
bootstrap-table-zh-CN.js这个js是用来汉化表的提示文字的,在下载下来的bootstrap-table文件夹下的地区文件夹中有很多的语言包支持
完啦,我们只需要在html页面中声明一个表跟菜单div(如果不需要,可以不声明)就好:
& lt; div类=癱ontainer-fluid”比;
& lt; div id="工具栏"类=癰tn-group”比;
& lt;按钮id=癰tn_add”类型=鞍磁ァ崩?癰tn btn-default”比;
& lt;跨类=" glyphicon glyphicon-plus”aria-hidden=" true "祝辞& lt;/span>新增
& lt;/button>
& lt;按钮id=癰tn_edit”类型=鞍磁ァ崩?癰tn btn-default”比;
& lt;跨类=" glyphicon glyphicon-pencil”aria-hidden=" true "祝辞& lt;/span>修改
& lt;/button>
& lt;按钮id=癰tn_delete”类型=鞍磁ァ崩?癰tn btn-default”比;
& lt;跨类=" glyphicon glyphicon-remove”aria-hidden=" true "祝辞& lt;/span>删除
& lt;/button>
& lt;按钮id=癰tn_info”类型=鞍磁ァ崩?癰tn btn-default”比;
& lt;跨类=癴a fa-info”aria-hidden=" true "祝辞& lt;/span>详情
& lt;/button>
& lt;/div>
& lt;表id=" table_sysUser "祝辞& lt;/table>
& lt;/div>之前
table_sysUser就是我们要显示的表列表啦。
我们来看看js怎么来请求后台的数据,并进行分页跟查询:
//项目根目录
var路径=$ (" # contextPath”) .val ();
$(文档)时函数(){//初始化表
var oTable=new TableInit ();
oTable.Init ();//初始化页面上面的按钮事件
$ (" # btn_add ") .click(函数(){//新增
}）；
$ (" # btn_edit ") .click(函数(){//编辑
}）；
$ (" # btn_info ") .click(函数(){//详情
}）；
$ (" # btn_delete ") .click(函数(){//删除
}）；
}）；
var TableInit=function () {
var oTableInit=新对象();//初始化表
oTableInit。Init=function () {
$ (' # table_sysUser ') .bootstrapTable ({
+ '/sysuser/findUser url:路径。行动',//请求后台的URL (*)
方法:“文章”,//请求方式(*)
工具栏:“#工具栏',//工具按钮用哪个容器
条纹:真的,//是否显示行间隔色
缓存:假的,//是否使用缓存,默认为真实的,所以一般情况下需要设置一下这个属性(*)
分页:真的,//是否显示分页(*)
可分类的:真的,//是否启用排序
sortName:“id”,
排序方式:“desc ",//排序方式
queryParams: oTableInit.queryParams,//传递参数(*)
queryParamsType:“限制”,
sidePagination:“服务器”,//分页方式:客户端客户端分页,服务器服务端分页(*)
pageNumber: 1、//初始化加载第一页,默认第一页//页大小:15日每页的记录行数(*)
pageList:[10、15、20、50]//可供选择的每页的行数(*)
搜索:真的,//是否显示表格搜索
strictSearch:没错,
showColumns:真的,//是否显示所有的列
showRefresh:真的,//是否显示刷新按钮
minimumCountColumns: 2//最少允许的列数
clickToSelect:真的,//是否启用点击选中行//高度:500//行高,如果没有设置高度属性,表格自动根据记录条数觉得表格高度
uniqueId: " id ",//每一行的唯一标识,一般为主键列
showToggle:真的,//是否显示详细视图和列表视图的切换按钮
cardView:假的,//是否显示详细视图
detailView:假的,//是否显示父子表
contentType:“应用程序/x-www-form-urlencoded”//解决提后交问题
列:[
{复选框:真},
{标题:“用户名称,:“用户名”,可分类的:真正的},
{标题:“手机号码”字段:“手机”,可分类的:真的,
格式化程序:函数(v r i) {
如果(v) {
返回v.substring (0, 3) +“* * * *”+ v.substring (7 4);
}
返回v;
}
}，
{标题:“邮箱账号”字段:“电子邮件”,可分类的:真正的},
{标题:“生日”,:“生日”,可分类的:真正的},
{标题:“部门”,:“departmentKey”,可分类的:真的,
格式化程序:函数(v r i) {
如果(r.departmentValue) {
返回r.departmentValue;
}
返回";
}
}，
{标题:“最后登录时间”,:“lastLogintime”,可分类的:真正的},
{标题:性别”,:“性”,可分类的:真的,
格式化程序:函数(v r i) {
开关(号码(v)) {
案例1:
返回“男”;
打破;
案例2:
返回“女”;
打破;
默认值:
返回“未知”;
打破;
}
}
}，
{标题:“用户状态”,:“地位”,可分类的:真的,
格式化程序:函数(v r i) {
返回r。statusCn==" false " & # 63;“启用”:“禁用”;
}
}，
{标题:“所属公司编号”,:“companyId”,可分类的:真正的},
{标题:“注册时间”,:“createTime”,可分类的:真正的},
{标题:“用户头像”,:“userhead”,可分类的:真正的},
{标题:“职位”,:“positionKey”,可分类的:真正的},
{标题:“角色”,:“角色”}]
}）；
};//得到查询的参数
oTableInit。queryParams=函数(params) {
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
