easyui datalist按组多选

结果如下:

image

数据样式如下:

[
{"text":"Epson WorkForce 845","group":"Printer"},
{"text":"Canon PIXMA MG5320","group":"Printer"},
{"text":"HP Deskjet 1000 Printer","group":"Printer"},
{"text":"Cisco RV110W-A-NA-K9","group":"Firewall"},
{"text":"ZyXEL ZyWALL USG50","group":"Firewall"},
{"text":"NETGEAR FVS318","group":"Firewall"},
{"text":"Logitech Keyboard K120","group":"Keyboard"},
{"text":"Microsoft Natural Ergonomic Keyboard 4000","group":"Keyboard"},
{"text":"Logitech Wireless Touch Keyboard K400","group":"Keyboard"},
{"text":"Logitech Gaming Keyboard G110","group":"Keyboard"},
{"text":"Nikon COOLPIX L26 16.1 MP","group":"Camera"},
{"text":"Canon PowerShot A1300","group":"Camera"},
{"text":"Canon PowerShot A2300","group":"Camera"}
]

代码如下:

<div class="easyui-datalist" title="Group DataList" id='list' style="width:400px;height:500px" data-options="
            url: 'datalist_data1.json',
            method: 'get',
            groupField: 'group',
            checkbox: true,
            selectOnCheck: false,
            onBeforeSelect: function(){return false;},
            groupFormatter: groupFormatter
            ">
    </div>
<script type="text/javascript">
        
        function groupFormatter(fvalue, rows){
        
            var first = $("#list").datalist('getRowIndex',rows[0]);
            return "<input name='checkbox' type='checkbox' value='checkbox' οnclick='checkall(this,"+ first +", " + rows.length + " )'/>" + fvalue + ' - <span style="color:red">' + rows.length + ' rows</span>';
        }
    
        function checkall(node, first, length){
            
            if(node.checked){
                for(var i = 0; i < length; i++)
                    $("#list").datalist('checkRow',first+i);
            }else{
                for(var i = 0; i < length; i++)
                    $("#list").datalist('uncheckRow',first+i);
            }
        }
    </script>
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值