bootstraptable

时间:2024-08-23 17:49:11编辑:流行君

bootstrap 给table 增加这一行的点击事件?

$table.bootstrapTable({ //url: 'json/dev.json', data: wcssdata, toolbar: '#toolbar', //工具按钮用哪个容器 //striped: true, //是否显示行间隔色 cache: false, //是否使用缓存,默认为true,所以一般情况下需要设置一下这个属性(*) pagination: true, //是否显示分页 sortable: true, //是否启用排序 sortOrder: "asc", //排序方式 //queryParams: postQueryParams,//传递参数(*) //sidePagination: "server", //分页方式:client客户端分页,server服务端分页(*) pageSize: 20, //每页的记录行数(*) pageList: [10, 25, 50, 100], //可供选择的每页的行数(*) strictSearch: true, //height: table_h, //行高,如果没有设置height属性,表格自动根据记录条数觉得表格高度,设置了行高后编辑时标头宽度不会随着下面的行改变,且颜色也不会改变???? uniqueId: "id", //每一行的唯一标识,一般为主键列 cardView: false, //是否显示详细视图 detailView: false, //是否显示父子表 paginationHAlign: "left", singleSelect: true, //search:true, //是否显示表格搜索,此搜索是客户端搜索,不会进服务端 //strictSearch: true, //showColumns: true, //是否显示所有的列 //showRefresh: true, //是否显示刷新按钮 clickToSelect: true, //是否启用点击选中行 paginationPreText: "<<", paginationNextText: ">>", columns: [{ checkbox: true, }, { field: 'id', title: '序号', width: "75px", }, { field: 'seq_no', title: '编号', }, { field: 'type', title: '类型', }, { field: 'position', title: '位置', }, { field: 'status', title: '设备状态', }, { field: 'fault', title: '故障现象', }, { field: 'purchase_time', title: '采购时间', }, { field: 'quality_time', title: '出保时间', }, { field: 'maintain_unit', title: '维护单位', }, { field: 'inputer', title: '录入者', }, { field: 'operate', title: '操作', width: '80px', events: operateEvents1, formatter: operateFormatter }, ], /*处理json数据需要配置此项 * responseHandler: function (res) { return res.rows; }*/ }); window.operateEvents1 = { 'click .RoleOfA': function(e, value, row, index) { detailmodal.open(); $("#dev_id").val(row.id); $("#seq_no").val(row.seq_no); $("#dev_pos").val(row.position); $("#dev_type1").val(row.type); $("#dev_status").val(row.status); $("#fault").val(row.fault); $("#buy_time").val(row.purchase_time); $("#quality_time").val(row.quality_time); $("#inputer").val(row.inputer); $("#maintain_unit").val(row.maintain_unit); for(var i in row) console.log(i); } }; function operateFormatter(value, row, index) { return [ '详情', ].join(''); }

bootstrap导出excel功能怎么用

Bootstrap结合BootstrapTable的使用,分为两种模试显示列表。引用的css:引用的JS:常用方法:刷新表格:$table.bootstrapTable('refresh');获取选择的行:$table.bootstrapTable('getSelections');1.服务端请求:即当数据量大,千百万条数据的情况下,只获取当页条件下的数据。每点击分页或查询都向服务端重新获取分页数据。前端代码:?1234567functioninitTable(){varqueryUrl='@Url.Content("~/Welcome/QueryList")'+'?rnd='++Math.random();$table=$('#table-javascript').bootstrapTable({//method:'get',method:'post',contentType:"application/x-www-form-urlencoded",//必须的,publicActionResultQueryList(intpageIndex=1,intpageSize=100){try{stringname=Request["UserName"];stringbirthday=Request["Birthday"];stringgender=Request["Gender"];stringAddress=Request["Address"];DocumentdocQuery=newDocument();if(!string.IsNullOrEmpty(name)){docQuery.Add("Name",newMongoRegex(".*"+name+".*",MongoRegexOption.IgnoreCase));}if(!string.IsNullOrEmpty(birthday)){docQuery.Add("Birthday",newMongoRegex(".*"+birthday+".*",MongoRegexOption.IgnoreCase));}if(!string.IsNullOrEmpty(gender)){docQuery.Add("Gender",gender);}if(!string.IsNullOrEmpty(Address)){docQuery.Add("Address",newMongoRegex(".*"+Address+".*",MongoRegexOption.IgnoreCase));}if(this.HttpContext.Request.QueryString.AllKeys.Contains("ToExcel")){ListlistExport=MongoDbHelper.GetList(MongoTables.OpenRoom,docQuery);//ListlistTilte=newList{""};ExportMethod(listExport);}longtotalCount=MongoDbHelper.GetTotalCount(MongoTables.OpenRoom,docQuery);varlist=MongoDbHelper.GetList(MongoTables.OpenRoom,docQuery,newDocument(),pageIndex,pageSize);stringjsonString=JsonHelper.ObjToJson(list);jsonString="{\"total\":"+totalCount.ToString()+",\"rows\":"+jsonString+"}";returnContent(jsonString);}catch(Exceptionex){returnContent(ex.Message);}}注意返回的格式:要返回总记录数total及分页后数据rows。未解决问题:导出Excel时,超出65536行数据时,会异常。怎样解决这个问题?2.客户端请求:当数据量较少,只有上千条数据时,一次性将所有数据返回给客户端,无论点下一页,或搜索条件时,不向服务端发请求,实现全文检索。这个比较简单,将sidePagination属性设为"client",因为客户端会处理分页和全文检索,无需向服务器端发请求,所以也无需传递参数。前端JS:?123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143functioninitTable(){varqueryUrl='@Url.Content("~/UserInfo/QueryList")'+'?rnd='++Math.random();$table=$('#table-javascript').bootstrapTable({method:'get',url:queryUrl,height:$(window).height()-200,striped:true,pagination:true,pageSize:50,pageList:[10,25,50,100,200],search:true,sidePagination:"client",showColumns:true,minimunCountColumns:2,columns:[{field:'state',radio:true},{field:'Id',title:'ID',align:'right',valign:'bottom',sortable:true},{field:'UserName',title:'姓名',width:100,align:'center',valign:'middle',sortable:true,formatter:nameFormatter},{field:'Account',title:'账号',align:'left',valign:'top',sortable:true},{field:'Address',title:'家乡',align:'middle',valign:'top',sortable:true},{field:'Phone',title:'电话',align:'left',valign:'top',sortable:true},{field:' ',title:' 号码',align:'left',valign:'top',sortable:true},{field:'Remark',title:'备注',align:'left',valign:'top',sortable:true},{field:'operate',title:'操作',align:'center',width:100,valign:'middle',formatter:operateFormatter,events:operateEvents}]});}后台直接返回Json数据即可。后台代码:?123456789101112131415161718192021222324252627publicActionResultQueryList(){try{Listlist=accessHelper.GetUserList();stringjsonString=JsonHelper.ObjToJson(list);returnContent(jsonString);}catch(Exceptionex){returnContent(ex.Message);}}


上一篇:移动归属地查询

下一篇:雕塑制作