BootStrap Table复选框默认选中功能的实现代码(从数据库获取到对应的状态进行判断是否为选中状态)
废话不多说,直接给大家贴代码了,具体代码如下所示:
$('#table').bootstrapTable('destroy'); $('#table').bootstrapTable({ url:'../data/kehulist.json', uniqueId: "id", striped:true, // pagination:true, clickToSelect:true, height:340, columns: [{ field : 'state', checkbox:true, formatter : stateFormatter },{ field: 'id', title: '组织编码', sortable: true, },{ field: 'name', title: '组织名称', sortable: true, }], }); //对应的函数进行判断; function stateFormatter(value, row, index) { if (row.state == true) return { disabled : false,//设置是否可用 checked : true//设置选中 }; return value; } 模拟后台对应的数据; [ { "id": "1", "name": "金蝶软件(中国)有限公司", "state": false, //是否选中 "tel":"18536552258" }, { "id": "2", "name": "金蝶软件(中国)有限公司", "state": true, "tel":"18536552258" }, { "id": "3", "name": "金蝶软件(中国)有限公司", "state": false, "tel":"18536552258" } ]
以上所述是小编给大家介绍的BootStrap Table复选框默认选中功能的实现代码(从数据库获取到对应的状态进行判断是否为选中状态),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!
相关推荐
-
bootstrap table 多选框分页保留示例代码
在使用bootstrap table的复选框功能的时候,由于采用服务端分页,当在第一页选择了某些数据,然后点击第二页选择一些数据,再次点回第一页,发现原先选择的数据已经清空了,原来的多选框并不支持翻页保留多选数据. 解决思路: 在分页的时候,吧原先选择的数据用一个全局变量保存,当再次翻页回来时,判断当前页数据是否存在于保存的数据数组中,存在则状态为选择.当然当取消选择的时候也要去删除数组中相应的数据. 为了解决这个问题,在查github上查文档发现有人提出了这个问题,并且作者wenzhixin
-
bootstrap table之通用方法( 时间控件,导出,动态下拉框, 表单验证 ,选中与获取信息)代码分享
1.bootstrap-table 单击单行选中 $('#gzrwTable').on('click-row.bs.table', function(e, row, $element) { $('.success').removeClass('success');// 清除前一次操作已选中行的选中状态 $($element).addClass('success');// 选中行添加选中状态 }); 2.bootstrap-table 获取选中行信息 function getSelectedRow
-
Angularjs+bootstrap+table多选(全选)支持单击行选中实现编辑、删除功能
最终实现效果: index.html <!DOCTYPE html> <html> <head> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js"></script> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-animat
-
bootstrap制作jsp页面(根据值让table显示选中)
本文实例为大家分享了bootstrap制作jsp页面的具体代码,告诉大家如何让table显示选中,供大家参考,具体内容如下 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@include file="/views/resource.jsp"%> <body style
-
BootStrap Table复选框默认选中功能的实现代码(从数据库获取到对应的状态进行判断是否为选中状态)
废话不多说,直接给大家贴代码了,具体代码如下所示: $('#table').bootstrapTable('destroy'); $('#table').bootstrapTable({ url:'../data/kehulist.json', uniqueId: "id", striped:true, // pagination:true, clickToSelect:true, height:340, columns: [{ field : 'state', checkbox:tr
-
layui table 复选框跳页后再回来保持原来选中的状态示例
layui table默认跳页后不存在源页面选中的状态.如果要实现记录源页面的选中状态,需要定义一个全局变量来记录数据选中状态. 1.修改table.js ;layui.define(["laytpl", "laypage", "layer", "form"], function (e) { "use strict"; var t = layui.$, i = layui.laytpl, a = layui
-
layui 数据表格复选框实现单选功能的例子
我就废话不多说了,大家直接看代码吧!希望能帮助到你 如下所示: //点击选中(单选) //单击行勾选checkbox事件 $(document).on("click",".layui-table-body table.layui-table tbody tr", function () { var index = $(this).attr('data-index'); var tableBox = $(this).parents('.layui-table-box'
-
基于vue v-for 循环复选框-默认勾选第一个的实现方法
应用场景:在进行多选的时候一般默认显示第一个. 实现方法:纯vue实现 例子: <span v-for="(one,index) in site"><input type="checkbox" :checked="index == 0" style="vertical-align: middle;"><label>{{one.name}}</label></span>
-
layui table复选框禁止某几条勾选的实例
Layui table复选框禁止勾选 var list = [0,1,3];//获得禁用的tr的行index //遍历设置复选框禁用 for(var i=0;i<list.length;i++){ $(".layui-table tr[data-index="+list[i]+"] input[type='checkbox']").prop('disabled',true); $(".layui-table tr[data-index="+
-
限制复选框最多选择项的实现代码
在一个招聘网站中,通过限制用户选择职位标签个数,可以精确定位用户的职位.例如,以复选框的形式为用户提供一下备选职位标签,限制用户最多选择3个,当超过三个时禁止用户继续选择. 复选框在问卷调查,招聘网站用的很广,今天来介绍一下限制复选框最多选择几项的方法: 思路: 监听复选框的onclick事件 checkbox.onclick = function(){ //代码块 } 监听复选框的checked属性: if(chckbox.checked){ //代码块 } HTML代码: < input t
-
全选复选框JavaScript编写小结(附代码)
对于全选框的操作分为两种情况: 1.单击全选框,下面全部选中 2.单击下面的复选框,全部点击上,全选框被选中,否则全选框没有选中. html样式 <tr> <td>爱 好</td> <td> <label for=""><input type="checkbox" name="fav" id="" value="苹果" class=&quo
-
Extjs gridpanel 中的checkbox(复选框)根据某行的条件不能选中的解决方法
具体代码如下所示: Ext.define('AM.view.test.ReceiptList', { extend: 'Ext.grid.Panel', alias: 'widget.receiptlist', id : 'receiptlist', selModel : { selType : 'checkboxmodel', mode : 'SIMPLE', checkOnly : true, renderer : function(v,p,record) { if (record.data
-
jquery判断复选框选中状态以及区分attr和prop
最近项目中需要用jquery判断input里checkbox是否被选中,发现用attr()获取不到复选框改变后的状态,最后查资料发现jQuery 1.6以后新增加了prop()方法,借用官方的一段描述就是: The difference between attributes and properties can be important in specific situations. Before jQuery 1.6, the .attr() method sometimes took pro
随机推荐
- 20个正则表达式必知(能让你少写1,000行代码)
- ckeditor自定义插件使用方法详解
- FLEX给页面添加滚动条实现思路及代码
- 分析nginx日志并屏蔽采集者ip(nginx屏蔽ip配置实例)
- 把首行和尾行互换的批处理
- ios用AFN进行文件上传的示例代码
- python回调函数用法实例分析
- jquery插件lazyload.js延迟加载图片的使用方法
- nw.js实现类似微信的聊天软件
- php数组函数array_key_exists()小结
- 解析php中用PHPMailer来发送邮件的示例(126.com的例子)
- 美化你的代码 vb(VBS)代码格式化的实现代码
- 用HAProxy来检测MySQL复制的延迟的教程
- ubuntu vps安装docker报错:Cannot connect to the Docker daemon at unix:///var/run/docker.sock.问题解决
- javascript 判断整数方法分享
- css技巧十条
- 详解Lua中if ... else语句的使用方法
- php 5.6版本中编写一个PHP扩展的简单示例
- IIS假死的解决方法 缩短IIS应用池回收时间来实现减少IIS假死
- android ocr——身份证识别的功能实现