easyui datagrid 引用checkbox失效

<%@ pagelanguage="java"contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

    <styletype="text/css">

    .div-table{

    margin-top:0px;

    }

    .div-table-top,.div-table{

    border: none;

    }

    .div-table-top{

    height:70px;

    position: relative;

    font-size:12px;

    }

    .div-datagrid{

    border-left:1px solid #cccccc;

    border-right:1px solid #cccccc;

    border-bottom:1px solid #cccccc;

    }

    .btn-new {

    margin-top:2px;

    margin-right:10px;

    display:inline-block;

    height: 26px;

    color: #FFF;

    background-color:#10477D;

    line-height:26px;

    width: 66px;

    text-align:center;

    background-image:url("../../images/export.png");

    background-repeat:no-repeat;

    background-position:5px 3px;

    font-size:12px; 

    cursor: pointer;

    position: absolute;

    right:0px;

    top:10px;

}

.datagrid-header {

    overflow: visible;

}

#btn-filter{

background-image:url("../../images/filter.png");

width:100px;

background-position:10px 3px;

}

.div-table .div-datagrid{

margin:4px;

}

input{outline:0px;}

.datagrid-row-selected{background-color:#eaf2ff;}

li{

list-style:none;

}

.ul-dimension{

width:600px;

}

.li{

width:149px;

}

.li-dimension-clicked{

background-color:#10477D;

color:white;

}

.li-dimension{

height:30px;

display:inline-block;

margin-top:5px;

line-height:30px;

padding:0px 10px 0px 10px;

cursor:pointer;

}

.ul-dimension{

height:30px;

}

.span-ll{

font-weight:bold;

}

.dd-ll{

margin-top:5px;

}

.pagination-btn-separator{

display:none;

}

.pagination .pagination-num{

border-color:#ccc;

}

#btn-go{

border:1px solid #ccc;

}

    </style>

<divclass="div-table">

<divclass='div-table-top'>

<divstyle="height:30px;"> 

<spanstyle="font-size:13px;font-weight:bold;color:#10477D;line-height:30px;padding-left:10px;">网格MR覆盖分析</span>

</div>

<divstyle="margin-top:5px;position: relative;height:40px;background-color: #edf3f8;">

<div>

</div>

<spanstyle="position: absolute;right:60px;top:8px;">

<spanstyle="width:60px;right:400px;top:4px;">日期:</span>

<inputid="dt1" name="dt1"style="width:150px"value="${SESSION_YESTERDAY}"/>

-

<inputid="dt2" name="dt2"style="width:150px"value="${SESSION_YESTERDAY}"/> 

</span>

<spanid="span-ensure"style="display: block;position:absolute;cursor:pointer;top:8px;width:40px;right:10px;background-color: #10477D;color:white;text-align: center;height:20px;line-height: 20px; border-radius:3px;">

确定

</span>

</div>

<spanid='btn-export'class="btn-new"style="top:3px;">&nbsp;&nbsp;导出</span>

</div>

<divclass="div-datagrid"style="height:720px;">

<divid="mydatagrid"fit="true"></div>

</div>

</div>

<div>

<dlclass="dl-ll"style="margin-left: 10px;">

<dtstyle="color:#10477D;border-bottom:1px solid #cccccc; padding:5px 5px 5px 5px; font-weight:bold;">指标口径：</dt>

<ddclass="dd-ll"><spanclass="span-ll">MR覆盖率：</span>RSRP>=-110dBm的采样点占比；</dd>

<ddclass="dd-ll"><spanclass="span-ll">弱覆盖采样点占比：</span> RSRP<-110dBm的采样点比例；</dd>

<ddclass="dd-ll"><spanclass="span-ll">MR弱覆盖小区：</span>过滤输出MR弱覆盖采样点占比大于20%；</dd>

</dl>

</div>

<style>

.datagrid-header-inner{

position:absolute;

}

</style>

<scripttype="text/javascript">

function initWholeTable(){

initGridHeight();

initEvent();

initDate();

initDatagrid();

initEnsureButton();//yuejing add 确认按钮

}

function initEnsureButton(){

$("#span-ensure").on("click",function(){

initDatagrid();

});

}

function initDate(){

var today=new Date('${SESSION_YESTERDAY }');

var flag = 0;

$("#dt1").datebox({onSelect:function(d1){

}}).datebox('calendar').calendar({

validator:function(date){

return today.getTime()>date.getTime();

}

});

$("#dt2").datebox({onSelect:function(d2){

}}).datebox('calendar').calendar({

validator:function(date){

return today.getTime()>date.getTime();

}

});

flag = 0;

}

function calculateDuring(d1,d2){

if(d2<d1){

layer.msg("结束时间不能小于开始时间");

returnfalse;

}

$("#during").html(1+(d2-d1)/(60*60*24*1000));

returntrue;

}

//为了自适应屏幕宽度

  function initGridHeight(){

columnNum=10;

$(".div-datagrid").css({height:((columnNum+2)*32)+22+"px"});

}  

var a=0;

var b=0;

function changeAB(a1,b1,ob){

$(".li-dimension").removeClass("li-dimension-clicked");

var dateString=extractDateString();

$(ob).addClass("li-dimension-clicked");

a=a1;

b=b1;

initDatagrid();

}

function initDatagrid(){

if(a==0){

initDatagrid1(true);

}else{

initDatagrid2(false,b);

}

initPageBar();

} 

var datagrid;

var myview = $.extend({},$.fn.datagrid.defaults.view,{

    onAfterRender:function(target){

        $.fn.datagrid.defaults.view.onAfterRender.call(this,target);

        var opts = $(target).datagrid('options');

        var vc = $(target).datagrid('getPanel').children('div.datagrid-view');

        vc.children('div.datagrid-empty').remove();

        if (!$(target).datagrid('getRows').length){

            var d = $('<div class="datagrid-empty"></div>').html(opts.emptyMsg ||'no records').appendTo(vc);

            d.css({

                position:'absolute',

                left:0,

                top:150,

                width:'100%',

                textAlign:'center'

            });

            $(".datagrid-pager").remove();

        }

    }

});

 

var global_offset_left=false;

function initDatagrid1(fitColumns){

var dateString=extractDateString();

var option={

fitColumns : fitColumns,

rownumbers: false,

pagination : true,

scrollbarSize:0,

url :"${WEB_CONTEXT}/netCoverageReport/queryGrid?&ignoreTime=y&subjectId=${subjectId}&"+dateString,

method : "POST",

pageSize:columnNum,

pageList:[columnNum],

loadMsg:"加载中......",

toolbar :'#tool',

view:myview,

singleSelect:true,

emptyMsg:"暂无结果",

pageNumber:1,columns : [[

         

        {"field": 'starttime',"title" :'统计日期',"align":"center",width:$(this).width() * 0.14},

            {"field": 'grid',"title" :'网格名称',"align":"center",width:$(this).width() * 0.14},

            {"field": 'vender',"title" :'设备厂商',"align":"center",width:$(this).width() * 0.14,

           filter:function(){

           var html=[];

           html.push("<div class='datagrid-filter-condition'>");

           html.push("<ul>");

          html.push("<li><input id='hw' name='equipmentVendors' type='checkbox' value='Huawei' />华为</li>");

          html.push("<li><input id='eri' name='equipmentVendors'  type='checkbox' value='Ericsson' />爱立信</li>");

          html.push("</ul>");

           html.push("</div>");

           html.push("<div class='datagrid-filter-btn'>");

          html.push("<span onclick='filter()'>确定</span>");

           return  html.join('');

           }

            },

            { "field":"poorpercent","title":"MR覆盖率.MRS（%）","align":"center",width:$(this).width() * 0.14},

        { "field": 'mrpercent',"title" :'MR弱覆盖率.MRS（%）',"align":"center",width:$(this).width() * 0.14},

        {"field": 'poorsum',"title" :'弱覆盖采样点数',"align":"center",width:$(this).width() * 0.14},

        {"field": 'ecinum',"title" :'采集小区数',"align":"center",width:$(this).width() * 0.14},

        {"field": 'allnum',"title" :'总采样点数',"align":"center",width:$(this).width() * 0.14},

        ]],

    onLoadSuccess:function(){

    $(".datagrid-header-inner").css({"left":"0px"});

        //去除datagrid默认的checkbox行为

    $(".datagrid-filter").find("input[type=checkbox]").unbind(".datagrid");

    }

};

datagrid=$('#mydatagrid').datagrid(option);

}

function extractDateString(){

var begin=new Date($("input[name='dt1']").val().replace(/-/g,"/")).format("yyyy/MM/dd");

var end=new Date($("input[name='dt2']").val().replace(/-/g,"/")).format("yyyy/MM/dd");

return "begin="+begin+"&end="+end;

}

function initDatagrid2(fitColumns,kk){

var dateString="";

if(kk)

dateString=extractDateString()+"&kk="+kk;

else

dateString=extractDateString();

var option={

fitColumns : fitColumns,

rownumbers: false,

pagination : true,

scrollbarSize:0,

url :"${WEB_CONTEXT}/netCoverageReport/queryECIDayReportMRS?&ignoreTime=y&subjectId=${subjectId}&"+dateString+"&filterStr=Ericsson;Huawei;",

method : "POST",

pageSize:columnNum,

pageList:[columnNum],

loadMsg:"加载中......",

toolbar :'#tool',

view:myview,

singleSelect:true,

emptyMsg:"暂无结果",

pageNumber:1,

columns : [[

           

            { "field":'starttime',"title" : '统计日期',"align":"center",width:100},

            {"field": 'grid',"title" :'网格名称',"align":"center",width:100},

            { "field":'vender',"title" : '设备厂商',"align":"center",width:100,

           filter:function(){

           var html=[];

            html.push("<div class='datagrid-filter-condition'>");

           html.push("<ul>");

            html.push("<li><input id='hw' name='equipmentVendors' type='checkbox' value='Huawei'/>华为</li>");

            html.push("<li><input id='eri' name='equipmentVendors'  type='checkbox' value='Ericsson' />爱立信</li>");

           html.push("</ul>");

           html.push("</div>");

            html.push("<div class='datagrid-filter-btn'>");

            html.push("<span onclick='filter()'>确定</span>");

           return  html.join('');

           }

            },

            { "field":"mrpercent","title":"MR覆盖率.MRS（%）","align":"center",width:130},

        { "field": 'poorpercent',"title" :'MR弱覆盖率.MRS（%）',"align":"center",width:130},

        { "field": 'poornum',"title" :'弱覆盖采样点数',"align":"center",width:120},

        { "field": 'ecinum',"title" :'采集小区数',"align":"center",width:130},

        { "field": 'allnum',"title" :'总采样点数',"align":"center",width:120},

        ]],

        onLoadSuccess:function(data){

        //去除datagrid默认的checkbox行为

    $(".datagrid-filter").find("input[type=checkbox]").unbind(".datagrid");

        // 从后台获取filterStr 设置厂商checkbox checked属性

     if(data.filterStr){

    var filters=data.filterStr.split(";");

    for(var i=0;i<filters.length;i++){

    $("input[name='equipmentVendors'][value='"+filters[i]+"']").prop("checked","checked");

    }

    } 

        

    var tmp = $(".datagrid-btable");

   var tmp1=$(".datagrid-header-inner");

    if(!global_offset_left){

    global_offset_left=tmp.offset().left;

    }

    tmp1.css({"left":(tmp.offset().left-global_offset_left)+"px"});

    $(".datagrid-body").off("scroll").on("scroll",function(e){

    tmp1.css({"left":(tmp.offset().left-global_offset_left)+"px"})

    });

     }

};

datagrid=$('#mydatagrid').datagrid(option);

}

function initPageBar(){

var pager = datagrid.datagrid('getPager');

pager.pagination({

displayMsg:'，每页{pageSize}条，共{totalPage}页',

layout:['first',"links",'last',"manual"],

beforePageText:" 跳转至",

afterPageText:"页",

buttons:[{

text:"GO",

id:"btn-go",

onClick:function(){

pager.pagination('select', $(".pagination-num").val());

}

}]

});

}

function initEvent(){

$(".div-table").on("click","#btn-export",function(){

var exportURL;

var dateString=extractDateString();

if(a==0){

exportURL="${WEB_CONTEXT}/netCoverageReport/queryGridMRSToExcel?subjectId=${subjectId}&planId=${planId}&"+dateString;

}else{

exportURL="${WEB_CONTEXT}/netCoverageReport/queryECIDayReportMRSToExcel?subjectId=${subjectId}&planId=${planId}&kk="+b+"&"+dateString;

}

console.log(a);

window.location.href=exportURL;

});

}

function filter(){

var dateString=extractDateString();

var filterStr="";

$("input[name='equipmentVendors']:checked").each(function(i){

filterStr+=$(this).val()+";";

});

$('#mydatagrid').datagrid({

 url:"${WEB_CONTEXT}/netCoverageReport/queryECIDayReportMRS?&ignoreTime=y&subjectId=${subjectId}&"+dateString+"&filterStr="+filterStr+"&kk="+b,

  }  

);

/* $(".datagrid-filter").find("input[type=checkbox]").unbind(".datagrid"); */

initPageBar();

}

</script>