BootStrap数据表格实例代码

2023-09-24 19:04:06 312

$(function(){ $('#archives-table').bootstrapTable({ url:"/coinSend/list",//数据源 dataField:"rows",//服务端返回数据键值就是说记录放的键值是rows，分页时使用总记录数的键值为total search:true,//是否搜索 cache:false, striped:true, pagination:true,//是否分页 sortable:true,//是否启用排序 sortOrder:"asc",//排序方式 //pageNumber:1, pageSize:10,//单页记录数 pageList:[5,10,20,50],//分页步进值 sidePagination:"server",//服务端分页 contentType:"application/json",//请求数据内容格式默认是application/json自己根据格式自行服务端处理 dataType:"json",//期待返回数据类型 method:"post",//请求方式 searchAlign:"left",//查询框对齐方式 silent:true, queryParamsType:"limit",//查询参数组织方式 queryParams:functiongetParams(params){ varparam={ pageNum:params.pageNumber, pageSize:params.pageSize, realName:params.search }; returnparam; }, responseHandler:function(res){ return{ "total":res.total,//总页数 "rows":res.rows//数据 }; }, searchOnEnterKey:false,//回车搜索 showRefresh:true,//刷新按钮 showColumns:true,//列选择按钮 buttonsAlign:"left",//按钮对齐方式 toolbar:"#userToolbarsendCoin",//指定工具栏 toolbarAlign:"right",//工具栏对齐方式 columns:[ /*{ title:"全选", field:"select", checkbox:true, width:20,//宽度 align:"center",//水平 valign:"middle"//垂直 },*/ { title:"ID",//标题 field:"id",//键名 sortable:true,//是否可排序 order:"desc"//默认排序方式 }, { field:"userInfo.userName", title:"用户名", sortable:true, titleTooltip:"thisisname" }/*, { field:"userInfo.id", title:"userInfo.id", }*/, { field:"userInfo.realName", title:"真实姓名", sortable:true, }, { field:"userInfo.department", title:"所属部门", sortable:true, },{ field:"coinName", title:"类型", sortable:true, }, { field:"amount", title:"数量", sortable:true, sorter:numSort }, { field:"validDateStart", title:"有效期起", sortable:true, //——修改——获取日期列的值进行转换 formatter:function(value,row,index){ vartime=newDate(value); vary=time.getFullYear();//年 varm=time.getMonth()+1;//月 vard=time.getDate();//日 returny+"-"+m+"-"+d } }, { field:"validDateEnd", title:"有效期止", sortable:true, //——修改——获取日期列的值进行转换 formatter:function(value,row,index){ vartime=newDate(value); vary=time.getFullYear();//年 varm=time.getMonth()+1;//月 vard=time.getDate();//日 returny+"-"+m+"-"+d} } , { field:"userInfo.id", title:"操作列", formatter:function(value,row,rowIndex){ varuserId=row.userInfo.id; varamount=row.amount; varvalidDateStart=row.validDateStart; varvalidDateEnd=row.validDateEnd; varrealName=row.userInfo.realName; console.log(userId); console.log(realName); console.log(amount);console.log(validDateStart);console.log(validDateEnd); if(userId!=null){ return' '+'

分配'+' '/*+ '

编辑'*/; }else{ return'

分配'; } } } ], onClickRow:function(row,$element){ //$element是当前tr的jquery对象 $element.css("background-color","white"); /*alert(row.id); id=row.id;*/ },//单击row事件 locale:"zh-CN",//中文支持, detailView:false,//是否显示详情折叠 detailFormatter:function(index,row,element){ varhtml=''; $.each(row,function(key,val){ html+="

"+key+":"+val+"

" }); returnhtml; } }) /*$('#archives-table').bootstrapTable('hideColumn','userInfo.id');*/ /*$("#searchBtn").click(function(){ varrealName=$("#realName").val(); $.ajax({ type:"post", url:"/coinSend/list", data:{param:param}, dataType:"json", success:function(json){ $("#archives-table").bootstrapTable('load',json);//主要是要这种写法 } }); });*/ })

BootStrap数据表格实例代码

员工列表

随机推荐

BootStrap数据表格实例代码

员工列表

热门推荐

随机推荐