天天看点

基于Easyui框架的datagrid点击表头复选框,其他复选框也被选择,取消其事件

<style type="text/css">
.chekbosscss,.sfzc,.sfzdfa,.bmzfa{margin: 0;padding: 0;width: 15px;height: 18px;vertical-align: middle;}
</style>

<script type="text/javascript" language="javascript">
    $(function () {
        binddata();
        RemoveHeaderCheckBoxHandle();
    })
    function binddata() {
        var param = {};
        $("#dg").datagrid({
                width: 'auto',
                height: 'auto',
                scrollbarSize: 0,
                url: "List",
                queryParams: param,
                columns: [[
                { field: 'ck', title: '', width: 100,checkbox: true},
                { field: 'zc', title: '<input type="checkbox" class="chekbosscss" name="sfzdfa" id="sfzc" onclick="cbxcheckbox(this)">是否注册', width: 100, formatter: function (value, row, index) {
                    return "<input type='checkbox' id='sfxyzc"+index+"' class='sfzc' "+(value=="1"?"checked='checked'":"")+"'>";
                } },
                { field: 'fa', title: '<input type="checkbox" class="chekbosscss" name="sfzdfa" id="sfzdfa" onclick="cbxcheckbox(this)">是否提交', width: 100, formatter: function (value, row, index) {
                    return "<input type='checkbox' id='sfzdfatj"+index+"' class='sfzdfa' "+(value=="1"?"checked='checked'":"")+"'>";
                }},
                { field: 'tj', title: '<input type="checkbox" class="chekbosscss" name="bmzfa" id="bmzfa" onclick="cbxcheckbox(this)">学分是否可提交', width: 150, formatter: function (value, row, index) {
                    return "<input type='checkbox' id='bmzfa"+index+"' name='bmzfa' class='bmzfa' "+(value=="1"?"checked='checked'":"")+"'>";
                }}
            ]],
                pageSize: 10,
                pageList: [10, 20, 30, 50],
                fitColumns: true,
                striped: true,
                pagination: false, //分页控件 
                rownumbers: true, //行号
                selectOnCheck: false,
                onBeforeSelect: function () {
                return false;
            }

        });

    }
    function reload() {
        var param = {};
        $("#dg").datagrid('reload', param);
    }
    ///点击表头复选框,其他复选框也被选择,取消其事件
    function RemoveHeaderCheckBoxHandle()
    {
        var dg=$("#dg");
        var tbObj=$.data(dg[0],"datagrid");
        var dc=tbObj.dc;
        var header=dc.header1.add(dc.header2);
        header.find("input[type=checkbox]").unbind("click.datagrid");
        header.find("input[type=checkbox][name!='sfzc'][name!='sfzdfa'][name!='bmzfa']").click(function(){
            var dg=$("#dg");
            var tbObj=$.data(dg[0],"datagrid");
            var opts=tbObj.options
            var rows=opts.finder.getRows(dg[0])
            if($(this).is(":checked"))
            {
                var bck=opts.finder.getTr(dg[0],"","allbody").addClass("datagrid-row-checked").find("div.datagrid-cell-check input[type=checkbox]");
                bck._propAttr("checked",true);
                opts.onCheckAll.call(dg[0],rows);
            }
            else
            {
                var bck=opts.finder.getTr(dg[0],"","checked").removeClass("datagrid-row-checked").find("div.datagrid-cell-check input[type=checkbox]");
                bck._propAttr("checked",false);
                opts.onUncheckAll.call(dg[0],rows)
            }
        })
    }
    function cbxcheckbox(obj)
    {
         var dg=$("#dg");
         var tbObj=$.data(dg[0],"datagrid");
         var dc=tbObj.dc;
         var body=dc.body1.add(dc.body2);
         if(obj.checked)
         {
            body.find("input[type=checkbox][class='"+obj.id+"']").prop({checked:true});
         }
         else
         {
            body.find("input[type=checkbox][class='"+obj.id+"']").removeAttr("checked");
         }
    }
    
    
    
</script>
<div class="tools-row">
    
    
    
</div>
<table id="dg">
    
</table>
           

效果图如下:

基于Easyui框架的datagrid点击表头复选框,其他复选框也被选择,取消其事件