精华内容
下载资源
问答
  • 关于使用layui获取表格复选框选中的数据的方法

    万次阅读 热门讨论 2018-09-19 18:06:23
    使用layui获取表格复选框选中的数据 今天在实现根据表格复选框选中的内容进行一系列的操作,一下的内容是基于使用layui模块实现的。首先先简述比较简单的方法,在layui官方文档也是提到的方法。(本人文笔不好,很多...

    使用layui获取表格选中的数据

    今天在实现根据表格选中的内容进行一系列的操作,一下的内容是基于使用layui模块实现的。首先先简述比较简单的方法,在layui官方文档也是提到的方法。(本人文笔不好,很多东西写的不好,请多多见谅哈)
    在使用方法渲染的方法实现表格头部工具栏的监听事件或者行数据的监听事件。
    以下截图是关于表格头部工工具栏的监听事件:
    在这里插入图片描述
    (其中括号里面的test为table标签里面lay-filter属性的值,变量data的数据就是选中的数据)

    二使用行工具栏获取行数据,不过该方法在这里说明一些而已,应该没有涉及表格选中与否的问题,以下截图便是关于行工具栏的获取行数据问题:
    在这里插入图片描述
    (其中test依然为table标签里面lay-filter属性的值,变量data的数据就是当前行的数据)

    咳咳,前面只是粗略地和大家说了说layui模板table的工具栏获取选中数据的问题,然后以下就是我最想和大家分享的内容。

    在页面只有一个表格的时候,我们需要对表格选中的数据进行一些增删改查的操作很容易实现。那如果一个页面加载了两个页面,然后需要通过一个按钮对两个两个表格的选中问题进行判断和获取选中的数据。首先如果还是实现table的头部工具栏肯定是不能实现该功能的。

    首先我先把自己的需求说出来,这样好理解吧。
    (项目需要对同一页面的两个表格进行操作,一、需要保证每个表格有且只能选中一条记录才能继续操作,其他情况都跳出错误提示告诉用户,二、需要获取选中的记录的数据,两个表格的选中数据都需要获取)
    其实一开始我自己听懵逼的,后来找找论坛看看,有大神提及到可以去看看table的数据结构,这样就可以一目了然了。懵逼依然,然后半信半疑去看看table的数据结构,如下图所示:
    在这里插入图片描述
    (由上图所示可以看出table的数据结构,在cache下就是我页面中两个table的id,一个为outputTestId,另一个为testId,这个根据自己的定义而定,不是唯一的。
    所示如果需要获取table的所有数据,可以这样写:
    var data = table.cache.testId;(testId为自己定义的table的id)

    看到这里 我们只是知道了怎么获取table的所有数据,可是怎么清楚这些数据中哪些数据是选中的记录呢。别急,看到以下这张图片说明你就会明白了。
    在这里插入图片描述
    (可知,其实每一条记录都有都有一个LAY_CHECKED属性来标记本条记录是不是被选中了,看到这里相信大家都明白了吧)

    只要通过判断每条记录的LAY_CHECKED属性即可获取到选中的数据了。知道了,前面提到的需求就so easy了。

    (注:不懂的,可以联系我哈。然后还有更好方法的话希望大家多多提出,我保证虚心学习!以前没有系统学习过web前端知识,所以有哪里说错了的,请大家指出哈)

    展开全文
  • <!... <title>CheckBox Selection on DataGrid - jQuery EasyUI Demo <script type="text/javascript" src="../../jquery.min.js"></script> ...,checkbox:true">可以给表格加上复选框
    <!DOCTYPE html>
    <html>
    <head>
    	<meta charset="UTF-8">
    	<title>CheckBox Selection on DataGrid - jQuery EasyUI Demo</title>
    	<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
    	<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
    	<link rel="stylesheet" type="text/css" href="../demo.css">
    	<script type="text/javascript" src="../../jquery.min.js"></script>
    	<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
        <script>
        	function getRow(){
    			var rows = $('#dg').datagrid('getSelections');
    	
    				
    			for(var i=0; i<rows.length; i++){
    				alert('Item ID:'+rows[i].itemid+"\nPrice:"+rows[i].listprice);
    			}
    		}
        </script>
    </head>
    <body>
    	<h2>CheckBox Selection on DataGrid</h2>
    	<div class="demo-info">
    		<div class="demo-tip icon-tip"></div>
    		<div>Click the checkbox on header to select or unselect all selections.</div>
    	</div>
    	<div style="margin:10px 0;"></div>
    	
    	<table id="dg" class="easyui-datagrid" title="CheckBox Selection on DataGrid" style="width:700px;height:250px"
    			data-options="rownumbers:true,singleSelect:false,url:'../../datagrid_data1.json'">
    		<thead>
    			<tr>
    				<th data-options="field:'ck',checkbox:true"></th>
    				<th data-options="field:'itemid',width:80">Item ID</th>
    				<th data-options="field:'productid',width:100">Product</th>
    				<th data-options="field:'listprice',width:80,align:'right'">List Price</th>
    				<th data-options="field:'unitcost',width:80,align:'right'">Unit Cost</th>
    				<th data-options="field:'attr1',width:220">Attribute</th>
    				<th data-options="field:'status',width:60,align:'center'">Status</th>
    			</tr>
    		</thead>
    	</table>
    	<div style="margin:10px 0;">
    		<span>Selection Mode: </span>
    		<select οnchange="$('#dg').datagrid({singleSelect:(this.value==0)})">
    			<option value="0">Single Row</option>
    			<option value="1">Multiple Rows</option>
    		</select><br/>
    		SelectOnCheck: <input type="checkbox" checked οnchange="$('#dg').datagrid({selectOnCheck:$(this).is(':checked')})"><br/>
    		CheckOnSelect: <input type="checkbox" checked οnchange="$('#dg').datagrid({checkOnSelect:$(this).is(':checked')})">
            <input type="button" value="test" onClick="getRow()"/>
    	</div>
    
    </body>
    </html>
    {"total":28,"rows":[
    {"productid":"FI-SW-01","productname":"Koi","unitcost":10.00,"status":"P","listprice":36.50,"attr1":"Large","itemid":"EST-1"},
    {"productid":"K9-DL-01","productname":"Dalmation","unitcost":12.00,"status":"P","listprice":18.50,"attr1":"Spotted Adult Female","itemid":"EST-10"},
    {"productid":"RP-SN-01","productname":"Rattlesnake","unitcost":12.00,"status":"P","listprice":38.50,"attr1":"Venomless","itemid":"EST-11"},
    {"productid":"RP-SN-01","productname":"Rattlesnake","unitcost":12.00,"status":"P","listprice":26.50,"attr1":"Rattleless","itemid":"EST-12"},
    {"productid":"RP-LI-02","productname":"Iguana","unitcost":12.00,"status":"P","listprice":35.50,"attr1":"Green Adult","itemid":"EST-13"},
    {"productid":"FL-DSH-01","productname":"Manx","unitcost":12.00,"status":"P","listprice":158.50,"attr1":"Tailless","itemid":"EST-14"},
    {"productid":"FL-DSH-01","productname":"Manx","unitcost":12.00,"status":"P","listprice":83.50,"attr1":"With tail","itemid":"EST-15"},
    {"productid":"FL-DLH-02","productname":"Persian","unitcost":12.00,"status":"P","listprice":23.50,"attr1":"Adult Female","itemid":"EST-16"},
    {"productid":"FL-DLH-02","productname":"Persian","unitcost":12.00,"status":"P","listprice":89.50,"attr1":"Adult Male","itemid":"EST-17"},
    {"productid":"FL-DLH-02","productname":"Persian","unitcost":12.00,"status":"P","listprice":89.50,"attr1":"Adult Male","itemid":"EST-17"},
    {"productid":"FL-DLH-02","productname":"Persian","unitcost":12.00,"status":"P","listprice":89.50,"attr1":"Adult Male","itemid":"EST-17"},
    {"productid":"FL-DLH-02","productname":"Persian","unitcost":12.00,"status":"P","listprice":89.50,"attr1":"Adult Male","itemid":"EST-17"},
    {"productid":"AV-CB-01","productname":"Amazon Parrot","unitcost":92.00,"status":"P","listprice":63.50,"attr1":"Adult Male","itemid":"EST-18"}

    ]}

    以上是页面和json数据源,引入相应的js和css。getSelections方法是获得所有勾选中的行数据,反悔一个数组,对数据进行遍历即可。<th data-options="field:'ck',checkbox:true"></th>可以给表格加上复选框。

    展开全文
  • https://blog.csdn.net/weixin_39182073/article/details/90901435

    https://blog.csdn.net/weixin_39182073/article/details/90901435

    https://blog.csdn.net/weixin_39182073/article/details/90901435

    https://bbs.csdn.net/topics/390724129

    var theArry = [];
    /*$("input[name=id]:checked").each(function () {
        theArray.push($(this).val());
    });*/
    
    $("input[name='id']:checked").each(function() {
        n = $(this).parents("tr").index() + 1;
        var obj = mDataTable.find("tr:eq(" + n + ")");
        var id = obj.find("[name='id']").val();
        var defaultDownUnitName = obj.find("td:eq(2)").text();
        var areaName = obj.find("td:eq(3)").text();
        var payPrice = obj.find("td:eq(5)").text();
        theArray.push({id:id,defaultDownUnitName:defaultDownUnitName,areaName:areaName,payPrice:payPrice});
    });
    
    alert(JSON.stringify(theArray));
    展开全文
  • 由于js接触不多,为找到这方法着实费了一番力气,所幸找到一篇博客(但忘了保存地址,今天自己记载下来,对原博主是在抱歉)  var array = $("input[name='checkPrint']:checked").map(function () {  ...

    由于js接触的不多,为找到这方法着实费了一番力气,所幸找到一篇博客(但忘了保存地址,今天自己记载下来,对原博主是在抱歉) 



    var array = $("input[name='checkPrint']:checked").map(function () {

                        return { "cell1": $.trim($(this).closest("tr").find("td:eq(1)").text()), "cell2": $.trim($(this).closest("tr").find("td:eq(2)").text()), "cell3": $.trim($(this).closest("tr").find("td:eq(3)").text()) }).get();

      $.each(array, function (i, d) {

    var s=d.cell1;

    }

    展开全文
  • 项目需求,可以用复选框勾选项目进行提交,如下表IDID测试项标定参数标定值我们已经获取到了表中所有行的数据,全选,部分选都可行,不用选复选框遍历方式去获取数据table.on('checkbox(test3)', function(obj){...
  • 直接修改复选框选中状态和伪复选框(DIV)Class 但是调用checkStatus获取不到选中的行 查看底层源代码checkStatus方法的实现是缓存数据中的属性来判断是否选中 所以循环缓存数据,用index找到操作数据修改,再次获取...
  • $('#add_sends').click(function () { var checkStatus = table.checkStatus('te'); var ids = [];... $(checkStatus.data).each(function (i, o) {//o即为表格中一行的数据 ids.push(o.student_id); ...
  • 如上图,我的任务是添加一个“获取”按钮,可以获取选中的复选框这一的内容,再将获取到的数据准换成JSON的格式,方便以后的发送。 1、分解任务 对于我来说,直接实现“获取”功能有一定难度,我会不知道从何入手...
  • 表格的某一列添加 type=“selection”,这一列就添加了复选框 <el-table-column type="selection" width="55" align="center"></el-table-column> 有了复选框,我们需要获取用户选择了哪些数据,给...
  • 我需要从Jquery Datatables隐藏列中获取选中复选框的值(在第一个可见列中).到目前为止我已经有了bodytable$= $('#dataTable').dataTable({"bJQueryUI" : true,"bPaginate" : true,"bSort" : false,"bFilter": ...
  • 1、这里checkbox有个大坑,本来想用小程序自带复选框,但终究满足不了需求,所以自定义按钮,给予选中及未选中状态再自定义属性绑定事件获取id, 2、直接setData修改数组中某一项注意点 效果图: 结果:提交...
  • 珊妹儿在使用slickgrid表格插件期间,发现我每次对表格操作后刷新表格,会把之前选中的行数据还显示选中状态,但其实获取表格选中数据已经是空的了,这里我们在刷新表格的代码位置加一条代码: $(".slick-cell ...
  • ``` //删除功能 $(function(){ var del;...现在的问题是怎么将图片中的复选框选中然后点删除按钮这条数据就消失了?其实就是隐藏。。后台数据都写好了。。就差这里怎么将选中的数据进行隐藏??
  • 在columns中加上一个字段即可 columns: [ { field : 'checked', checkbox : true, //跟据返回每行的数据 formatter :function(value,row,...获取本页面选中行的数据 var ids = $('#id') .bootstra.
  • 阅读目录 复选框 多表头 分组 汇总 明细 复选框 grid可以设置复选框模式进行多选,只需要简单配置 checked:true 获取选中行 如果要获取
  • 阅读目录 复选框 多表头 分组 ...复选框 ...grid可以设置复选框模式进行多选,只需要简单的...如果要获取选中的行,可以用getSelecteds方法: var rows = g.getSelecteds(); alert(rows.length); 默认选中 ...
  • 在进行表格操作时,使用element-ui 表格控件时加入复选框后默认是无法进行翻页记忆。 2. 翻页记忆 在进行复选框翻页记忆操作时需要在表格复选框中分别添加,这个两个参数在翻页复选中必须添加,否则无效。 :row...
  • layui获取选中行数据两种方法

    万次阅读 2019-06-17 22:24:46
    开发工具与关键技术:Vs 作者:Mr_恺 撰写时间:2019年6月15日 用过layui中的表格模块,都知道有获取选中行的方法,通过获取行的数据,根据ID...用这个方法一定要在表头设置一个单选框或者复选框,不然它是获取不...
  • frag5.cfm中只有一代码.values are #form.f1# 此行显示“值是” – 也就是说,复选框的表单值,所有名称为f1都没有被选中.这是获取这些值错误方法吗?有人能告诉我正确事吗?原始表格如下:action = "frag5.cfm...
  • 2.复选框回显 a:表格数据不是动态加载的情况下,表格会自动选中之前选中的 b:表格数据是动态获取的,需要根据来进行回显 原理:拿已经存储好的之前选中的数据去匹配表格中某一的某一个属性,两个数组对象...
  • 获取表格中选中项js优化实现

    千次阅读 2013-06-30 18:23:07
    在系统应用软件中,经常会有选中表格最前头的复选框进行acid操作,而修改往往是针对一记录,删除则是可以多行批量删除。  因为太多界面都有这个需求,所以,完全可以抽取出一个公共方法。因为js完成验证后...
  • Layui的表格点击事件

    万次阅读 2019-06-10 08:14:07
    这个方法是选中单选框方法复选框也有复选框的方法,可以基于责怪单选方法里面写 这里就是选择到选中框然后处理选中行的数据。 layuiTable.on(‘row(tabDicName)’, function (obj) { var da...
  • 获取选中行的某个字段值: 在属性中传入需要值(row.field名),后面获取的时候,通过attr('属性名')来...checkbox:true//第一列显示复选框,若单选,需加入singleSelect },{ field:'operate', title:'操作', ...
  • layui表格实现多选表格行批量删除

    千次阅读 2020-10-11 20:21:01
    话不多说,直接上代码 ...这样才能知道你选中了哪一,接着通过循环选中行的长度,将该行ID字段一个个添加到数组中,这样就获取到了需要删除多行ID值了。 全程图片,完整过程!如不懂,可私聊作者 ...

空空如也

空空如也

1 2 3 4 5
收藏数 98
精华内容 39
关键字:

获取复选框选中的表格的行