easyui全选、取消所有页

最新推荐文章于 2023-08-18 11:12:43 发布
最新推荐文章于 2023-08-18 11:12:43 发布
阅读量3.2k 收藏 1
点赞数
分类专栏： web前端 文章标签： easyui web前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/duqian42707/article/details/50514661
版权

关键代码：

 <script type="text/javascript">
    var type='select'   //模式：选中/取消
    var selected=new Array();   //已选中的行
    var canceled=new Array();   //已取消的行
    $(function(){
        $('#datalist').datagrid({
            view: myview,
            //fitColumns: true,
            algin:'center',
            url:'<%=request.getContextPath()%>/sys/log/ajaxDatagrid',
            idField:'LOG_ID',
            columns:[[
            {field:'LOG_ID',title:'ID',width:'40',checkbox:true},  
            {field:'NUM',title:'序号',width:'40'},  
            {field:'USER_NAME',title:'用户',width:'80',align:'center'},  
            {field:'SYSTEM',title:'平台',width:'60',align:'center',formatter:dataFormat},  
            {field:'FUNC_RIGHT_NAME',title:'功能',width:'200',align:'center'},  
            {field:'MOD_TIME',title:'时间',width:'150',align:'center'},  
            {field:'UUID',title:'UUID',width:'275',align:'center'},  
            {field:'DETAIL',title:'具体内容',align:'left',width:'400',formatter:function(value,row,index){
                    var html='<a href="javascript:view('+row.LOG_ID+')">'+value+'</a>';
                    return html;
                }
            }
            ]],
            height:620,
            pageSize:12,
            pageList:[12,24,36],
            pagination:true
        })

        $('#datalist').datagrid({onLoadSuccess :function(data){
            initRows()//翻页初始化
        }})
        $('#datalist').datagrid({onCheckAll :function(){
            type='cancel'//切换为取消模式
            selected=new Array();
            canceled=new Array();
        }})
        $('#datalist').datagrid({onUncheckAll :function(){
            type='select'//切换为选中模式
            selected=new Array();
            canceled=new Array();
        }})
        $('#datalist').datagrid({onSelect:function(index,row){
            //选中某条数据时：若是select模式则在selected变量中添加一个id(若已存在则不添加)，
            //若是cancel模式，则从canceled变量中删除该id
            if(type=='select'){
                if(selected.indexOf(row.LOG_ID)==-1){
                    selected.push(row.LOG_ID)
                }
            }else{
                var index = canceled.indexOf(row.LOG_ID)
                if(index!=-1){
                    canceled.splice(index,1)
                }
            }
        }})
        $('#datalist').datagrid({onUnselect:function(index,row){
            //取消某条数据时：若是select模式则从selected变量中删除该id，
            //若是cancel模式，则在canceled变量中添加一个id(若已存在则不添加)
            if(type=='select'){
                var index = selected.indexOf(row.LOG_ID)
                if(index!=-1){
                    selected.splice(index,1)
                }
            }else{
                if(canceled.indexOf(row.LOG_ID)==-1){
                    canceled.push(row.LOG_ID)
                }
            }
        }})


    })
    //翻页初始化
    function initRows(){
        var l = $('#datalist').datagrid('getRows').length
        if(type=='select'){
            //若是select模式，则先将该页所有行取消选中，在选中selected中本页的行
            var myselected=new Array();
            for (var i=0;i<selected.length;i++){
                var index=$('#datalist').datagrid('getRowIndex',selected[i])
                if(index!=-1){
                    myselected.push(index)
                }
            }
            for (var i=0;i<l;i++){
                $('#datalist').datagrid('unselectRow',i)
            }
            for (var i=0;i<l;i++){
                if(myselected.indexOf(i)!=-1){
                    $('#datalist').datagrid('selectRow',i)
                }
            }
        }else{
            //若是cancel模式，则先将该页所有行选中，再取消选中canceled中本页的行
            var mycanceled=new Array();
            for (var i=0;i<canceled.length;i++){
                var index=$('#datalist').datagrid('getRowIndex',canceled[i])
                if(index!=-1){
                    mycanceled.push(index)
                }
            }
            for (var i=0;i<l;i++){
                $('#datalist').datagrid('selectRow',i)
            }
            for (var i=0;i<l;i++){
                if(mycanceled.indexOf(i)!=-1){
                    $('#datalist').datagrid('unselectRow',i)
                }
            }
        }

    }

    function chmod(){
        if(type=='select'){
            alert('selected:'+selected)
        }else{
            alert('canceled:'+canceled)
        }

    }

  </script>
  <div class="layer">
            <div class="search_form" style="margin-bottom:20px;">
               <form>
               <table width="85%">
                  <input type="button" value="变更授权" onclick="chmod()"/> 
               </table>
               </form>
            </div>

            <div class="common_list">
                <table class="tablelist comm" id="datalist" ></table>
            </div>
  </div>

全部代码：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  </head>
  <body>
  <style>
  .sipt{width:100px!important}
  #param3[class="sipt"]{width:230px!important}
  #param7[class="sipt"]{width:230px!important}
  </style>
  <script type="text/javascript">
    var type='select'   //模式：选中/取消
    var selected=new Array();   //已选中的行
    var canceled=new Array();   //已取消的行
    $(function(){
        judgement(1);
        judgement(5);
        $('#datalist').datagrid({
            view: myview,
            //fitColumns: true,
            algin:'center',
            url:'<%=request.getContextPath()%>/sys/log/ajaxDatagrid',
            idField:'LOG_ID',
            columns:[[
            {field:'LOG_ID',title:'ID',width:'40',checkbox:true},  
            {field:'NUM',title:'序号',width:'40'},  
            {field:'USER_NAME',title:'用户',width:'80',align:'center'},  
            {field:'SYSTEM',title:'平台',width:'60',align:'center',formatter:dataFormat},  
            {field:'FUNC_RIGHT_NAME',title:'功能',width:'200',align:'center'},  
            {field:'MOD_TIME',title:'时间',width:'150',align:'center'},  
            {field:'UUID',title:'UUID',width:'275',align:'center'},  
            {field:'DETAIL',title:'具体内容',align:'left',width:'400',formatter:function(value,row,index){
                    var html='<a href="javascript:view('+row.LOG_ID+')">'+value+'</a>';
                    return html;
                }
            }
            ]],
            height:620,
            pageSize:12,
            pageList:[12,24,36],
            pagination:true
        })



        $('#datalist').datagrid({onLoadSuccess :function(data){
            initRows()//翻页初始化
        }})
        $('#datalist').datagrid({onCheckAll :function(){
            type='cancel'//切换为取消模式
            selected=new Array();
            canceled=new Array();
        }})
        $('#datalist').datagrid({onUncheckAll :function(){
            type='select'//切换为选中模式
            selected=new Array();
            canceled=new Array();
        }})
        $('#datalist').datagrid({onSelect:function(index,row){
            //选中某条数据时：若是select模式则在selected变量中添加一个id(若已存在则不添加)，若是cancel模式，则从canceled变量中删除该id
            if(type=='select'){
                if(selected.indexOf(row.LOG_ID)==-1){
                    selected.push(row.LOG_ID)
                }
            }else{
                var index = canceled.indexOf(row.LOG_ID)
                if(index!=-1){
                    canceled.splice(index,1)
                }
            }
        }})
        $('#datalist').datagrid({onUnselect:function(index,row){
            //取消某条数据时：若是select模式则从selected变量中删除该id，若是cancel模式，则在canceled变量中添加一个id(若已存在则不添加)
            if(type=='select'){
                var index = selected.indexOf(row.LOG_ID)
                if(index!=-1){
                    selected.splice(index,1)
                }
            }else{
                if(canceled.indexOf(row.LOG_ID)==-1){
                    canceled.push(row.LOG_ID)
                }
            }
        }})


    })
    //翻页初始化
    function initRows(){
        var l = $('#datalist').datagrid('getRows').length
        if(type=='select'){
            //若是select模式，则先将该页所有行取消选中，在选中selected中本页的行
            var myselected=new Array();
            for (var i=0;i<selected.length;i++){
                var index=$('#datalist').datagrid('getRowIndex',selected[i])
                if(index!=-1){
                    myselected.push(index)
                }
            }
            for (var i=0;i<l;i++){
                $('#datalist').datagrid('unselectRow',i)
            }
            for (var i=0;i<l;i++){
                if(myselected.indexOf(i)!=-1){
                    $('#datalist').datagrid('selectRow',i)
                }
            }
        }else{
            //若是cancel模式，则先将该页所有行选中，再取消选中canceled中本页的行
            var mycanceled=new Array();
            for (var i=0;i<canceled.length;i++){
                var index=$('#datalist').datagrid('getRowIndex',canceled[i])
                if(index!=-1){
                    mycanceled.push(index)
                }
            }
            for (var i=0;i<l;i++){
                $('#datalist').datagrid('selectRow',i)
            }
            for (var i=0;i<l;i++){
                if(mycanceled.indexOf(i)!=-1){
                    $('#datalist').datagrid('unselectRow',i)
                }
            }
        }

    }

    function chmod(){
        if(type=='select'){
            alert('selected:'+selected)
        }else{
            alert('canceled:'+canceled)
        }

    }
    function dataFormat(value,row,index){
        if(value=='0'){
            return 'web端';
        }else if(value=='1'){
            return '移动端';
        }
    }
    function query(){
        var param='';
        if($('#param3').val()!=''){
            param+=$('#param1').val()+',';
            param+=$('#param2').val()+',';
            param+=$('#param3').val()+',';
        }
        if($('#param3').val()!=''&&$('#param7').val()!=''){
            param+=$('#param4').val()+',';
        }
        if($('#param7').val()!=''){
            param+=$('#param5').val()+',';
            param+=$('#param6').val()+',';
            param+=$('#param7').val()+',';
        }
        if(param!=''){
            param=param.substring(0, param.length-1);
        }
        $('#datalist').datagrid('load',{param:param})
    }
    /**
     * 根据param1(param5)的选择,改变param2(param6)、param3(param7)的内容及类型
     */
    function judgement(num){
        $('#param'+(num+1)).empty();
        var obj = $('#param'+(num+2)).parent()
        obj.empty()
        var p = $('#param'+num).val();
        if(p=='3'){
            obj.append('<input class="ssl" type="text" id="param'+(num+2)+'" />')
            if(num==1){
                $('#param'+(num+1)).append('<option value=">">大于</option><option value="=">等于</option><option value="<">小于</option>')
                $('#param'+(num+2)).click(function(){WdatePicker({startDate:'%y-%M-%d 00:00:00',dateFmt:'yyyy-MM-dd HH:mm:ss'})})
            }else{
                $('#param'+(num+1)).append('<option value="<">小于</option><option value="=">等于</option><option value=">">大于</option>')
                $('#param'+(num+2)).click(function(){WdatePicker({startDate:'%y-%M-%d 23:59:59',dateFmt:'yyyy-MM-dd HH:mm:ss'})})
            }
        }else if(p=='8'){
            $('#param'+(num+1)).append('<option value="like">包含</option>')
            obj.append('<input class="ssl" type="text" id="param'+(num+2)+'"/>')
        }else if(p=='1'||p=='4'){
            $('#param'+(num+1)).append('<option value="=">等于</option>')
            if(p=='1'){
                obj.append('<select class="sipt" id="param'+(num+2)+'"><option value="0">web端</option><option value="1">移动端</option></select>')
            }else{
                obj.append('<select class="sipt" id="param'+(num+2)+'"><option value="0">使用日志</option>'
                    +'<option value="1">正常操作日志</option><option value="2">错误日志</option></select>')
            }
        }else{
            $('#param'+(num+1)).append('<option value="like">包含</option><option value="=">等于</option>')
            obj.append('<input class="ssl" type="text" id="param'+(num+2)+'"/>')
        }
    }

    function view(logId){
        layer.open({
            type:2,
            content:'<%=request.getContextPath()%>/sys/log/view?logId='+logId,
            area:['600px','500px'],
            closeBtn :0,
            title:['查看']
        })
    }

  </script>


        <div class="nav">
            <div class="current">系统管理>>日志管理</div>
            <div class="btns">
            </div>
        </div>

        <div class="layer">
            <div class="search_form" style="margin-bottom:20px;">
               <form>
               <table width="85%">
                  <tr>
                  <td><select id="param1" onchange="judgement(1)" class="sipt">
                        <option value="0">用户</option>
                        <option value="1">平台</option>
                        <option value="2">功能</option>
                        <option value="3">时间</option>
                        <option value="4">日志类型</option>
                        <option value="5">终端号</option>
                        <option value="6">应用名称</option>
                        <option value="7">UUID</option>
                        <option value="8">具体内容</option>
                    </select></td>
                <td>
                <select id="param2" class="sipt"></select></td>
                <td><input type="text" id="param3" class="ssl"/></td>
                <td>
                <select id="param4" class="sipt">
                    <option value="and">并且</option>
                    <option value="or">或者</option>
                </select></td>
                <td>
                <select id="param5" onchange="judgement(5)" class="sipt">
                    <option value="0">用户</option>
                    <option value="1">平台</option>
                    <option value="2">功能</option>
                    <option value="3">时间</option>
                    <option value="4">日志类型</option>
                    <option value="5">终端号</option>
                    <option value="6">应用名称</option>
                    <option value="7">UUID</option>
                    <option value="8">具体内容</option>
                </select></td>
                <td>
                <select id="param6" class="sipt"></select></td>
                <td><input type="text" id="param7" class="ssl"/></td>
                  <td><img src="<%=request.getContextPath()%>/resources/images/btn-search.png" onclick="query()" style="height:35px;cursor: pointer;"/>
                  <input type="button" value="变更授权" onclick="chmod()"/></td> 
                  </tr>
               </table>
               </form>
            </div>

            <div class="common_list">
                <table class="tablelist comm" id="datalist" ></table>
            </div>
        </div>
  </body>
</html>
duqian42707
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
easyui datagrid的全选、全不选方法
u012220753的博客
04-15 1万+
onUncheckAll /**全不选的处理*/ function onUncheckAll(rows,textID,examType){ var oldTmp = document.getElementById(textID).value;//原有的 内容 var newText=oldTmp; $.each(rows, function(index, item){...
easyui checkbox +全选
08-07
标题 "easyui checkbox +全选" 指的是在网页界面设计中使用 EasyUI 框架实现复选框（checkbox）以及全选功能。EasyUI 是一个基于 jQuery 的前端框架，它提供了一系列预定义的 CSS 样式和 JavaScript 组件，帮助...
jQuery EasyUI datagrid在翻页以后仍能记录被选中行的实现代码
10-21
主要介绍了jQuery EasyUI datagrid在翻页以后仍能记录被选中行的实现代码的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下
easyUI获取当前列数据
weixin_45732391的博客
09-02 667
easyUI获取当前列数据 1.通过formatter传index 再： $('#dg').datagrid('selectRow', row);//按照选择的index来找到所选行 var user = $('#dg').datagrid('getSelected');//获取数据 2.是已经选中某列再进行点击修改，删除等操作： 直接： var user = $('#dg').datagrid('getSelected');//获取数据 ...
jquery easyui combobox设置默认选中项
热门推荐
醒着做梦的专栏
03-22 2万+
var data = $('#staffName').combobox('getData');//获取所有下拉框数据 if (data.length > 0) { $('#staffName').combobox('select',data[0].id);  } //实际情况是编辑的时候要重新带入添加时选中的选项 //首先在页面用隐藏域获取需要选中值，split分割后直接 //
easyui数据行禁止选中
Dzq_Boyka的博客
11-14 3084
原文 ： http://blog.csdn.net/fwk1010/article/details/51970991 jQuery(function($) {              $('#dataTable').datagrid({                  //title:'菜单列表', //标题                 method : 'post
EasyUI实现二级页面的内容勾选的方法
09-03
4. `onUnselectAll`: 当用户取消全选时触发，同样遍历所有行，从Map中移除所有项。 在父页面中，我们需要获取二级页面传递过来的勾选数据。通过查找二级页面的form表单（如`#selectForm`）以及其中的隐藏字段`input...
在easyui-combobox多选模式下加入选择所有选项
04-18
在实际应用中，我们可能还需要处理反选（取消所有选择）的功能，这可以通过在按钮上添加一个条件判断来实现： ```javascript if ($('#myComboBox').combobox('getValues').length === options.length) { // 如果...
在DataGrid中进行复选框的操作(全选和取消)
08-18
在某些应用场景下，我们可能需要在`DataGrid`的每一行添加复选框，以便用户可以多选操作，如全选和取消全选功能。下面我们将详细探讨如何实现这一功能。 首先，我们需要在`DataGrid`中添加复选框列。这可以通过...
使用easyUI实现树菜单
09-04
EasyUI的树菜单提供了丰富的API方法，如`expandNode`用于展开指定节点，`collapseNode`用于折叠节点，`selectNode`用于选择节点，`unselectNode`用于取消选择节点。 ### 7. 自定义样式和行为 通过CSS，你可以...
JQuery EasyUI取消选中所有页勾选/选中内容
R_obert的博客
08-18 856
解决JQuery EasyUI取消选中所有页勾选/选中内容的问题
easyUI的datagrid全选按钮翻页后取消勾选状态
martin9wind的博客
12-04 2663
现象：在easyUI的datagrid里勾选全选按钮，翻页后全选按钮仍是选中状态。去除该勾选状态处理如下 处理： $("#"+datagridId).parent().find("div.datagrid-header-check").children("input[type='checkbox']").eq(0).attr("checked", false); ...
easyui combobox 清除选中项目 和 清空option选项
weixin_45099902的博客
04-20 2499
$(’#cmbJob’).combobox(‘clear’);//清空选中项 $(’#cmbJob’).combobox(‘loadData’, {});//清空option选项 $(function () { $("#cmbBrand").combobox({ onChange: function (newValue, oldValue) { ...
easyUI 属性总结
狼魂之力
07-30 1800
1、div easyui-window 生成一个window窗口样式。 属性如下： 1)modal:是否生成模态窗口。true[是] false[否] 2)shadow:是否显示窗口阴影。true[显示] false[不显示] 2、div easyui-panel 生成一个面板。 属性如下: 1)title:该标题文本显示在面板头部。 2)iconCls:在面板上通过一个CSS类显示16x16图标。 3)width:设置面板宽度。默认auto。 4)height:设置面板高
easyui datagrid去掉全选按钮
weixin_33973609的博客
06-05 742
第一步： F12查看元素，选中全选按钮，把全选按钮的class里边加上display：none属性。找到对应的class，即.datagrid-header-check。 第二步： 在加载 表格的时候添加事件：onLoadSuccess。 第三步： 在事件中写入下面句，用空代替原有HTML 达到取消效果。 $(".datagrid-header-check").html(""); ...
Easyui里easyui datagrid 单击行不选中，只有复选框选中才选中
流萤飞火的博客
01-11 6940
昨天在使用easyui的过程中出现一个问题，就是当我需要使用复选框批量处理数据时，要求只有复选框选中的数据才可以处理，结果发现当单击数据时，数据也会被选中，后来百度发现有人说SelectOnCheck属性与CheckOnSelect属性，使用后发现不行，这两个属性只是决定单击与复选框的关系，并不能实现单击数据不选中的功能。后在另一篇文章发现一种方法：onClickRow: function (ro...
easyUI table datagrid 选中取消全选触发事件
生活没有圈的博客
12-14 1255
根据 easyUI 绑定table id，datagrid 选中取消全选触发事件 $(function(){ $("#businessbillgrid").datagrid({ //选中单个 onCheck :function(rowIndex,rowData){ var selectedrows= $('#businessbillgrid').datagrid('getChecked'); var je = 0; var suiE = 0;
easyui datagrid 去掉全选按钮
风筝的专栏
08-20 2801
只要在加载表格的时候添加事件：onLoadSuccess  "onLoadSuccess" : function() {    $(".datagrid-header-check").html(""); }   注：去掉全选按钮的目的就是为了单个操作，所以记得要设置属性singleSelect:true
easyui数据表格全选
最新发布
09-26
要在easyui数据表格中实现全选功能，需要进行以下步骤： 1. 设置表格的属性singleSelect为false，允许多选。 2. 在表格的列定义中添加一列复选框列，用于选择。 3. 给复选框列添加点击事件，在事件中获取当前行的复选框状态，并根据状态设置其他行的复选框状态。 4. 添加一个表头复选框，用于全选/全不选功能。 5. 给表头复选框添加点击事件，在事件中根据当前状态设置所有行的复选框状态。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值