Easyui Datagrid 的toolbar如何添加复选框

效果图：

​​​​​​​

 

今天遇到需要给Datagrid toolbar里添加单选框、复选框，一开始直接写在text里：

{
    id:"ifMultiple_btn",
    text:'<label><span title=\'设置表格是否可选多行，导出多条数据或批量删除使用\' style=\'color: red;padding-top:10px\' >*</span> 选多行 </label>'+'<input class="easyui-checkbox" type="checkbox" id="ifMultiple" value="1" style=\'height: 13px\'></input></div>',
}

这样产生的结果是复选框无法选择，可能是点击事件冲突，或者兼容性问题导致的，这一点没有去深究。

接着查看代码发现复选框包含在Button里面了，想到的解决方法是在button外层包一层<div>，把复选框“解放”出来，尝试了一下成功了，代码如下：

    var ToolBar = [{
        id: "AddQuestion",
        text: '新增',
        iconCls: '	icon-add',
        handler: function () {
        }
    }, {
        id: "CopyQuestion",
        text: '复制',
        iconCls: 'icon-copy',
        handler: function () {
        }
    }, '-', {
        id: "QuestionEvaluate",
        text: '评价',
        iconCls: 'icon-blue-edit',
        handler: function () {
        }
    }, {
        id: "QuestionEvaluateAudit",
        text: '评价审核',
        iconCls: 'icon-person-seal',
        handler: function () {
        }
    }, '-', {
        id: "QuestionStop",
        text: '停止',
        iconCls: 'icon-stop-order',
        handler: function () {
        }
    }, {
        id: "QuestionCancel",
        text: '撤销',
        iconCls: 'icon-cancel-order',
        handler: function () {
        }
    }, {
        id: "QuestionUnUse",
        text: '作废',
        iconCls: 'icon-abort-order',
        handler: function () {
         }
    }, {
        id: "QuestionRevokeUnUse",
        text: '撤销作废',
        iconCls: 'icon-back',
        handler: function () {
        }
    }, '-', {
        id: "RowMoveUp",
        iconCls: 'icon-arrow-top',
        handler: function () {
        }
    }, {
        id: "RowMoveDown",
        iconCls: 'icon-arrow-bottom',
        handler: function () {
        }
    }, '-', {
        text: '打印护理计划单',
        iconCls: 'icon-print',
        handler: function () {
        }
    },  {
        text: '按勾选打印护理计划单',
        iconCls: 'icon-print',
        handler: function () {
        }
    },'-',{
	    id: "EditDateTime",
	    text: '修改创建时间',	    
        iconCls: 'icon-edit',
        handler: function () {
        }
	},{
		id:"ifMultiple_btn",
		text:'<label><span title="设置表格是否可选多行，导出多条数据或批量删除使用" '+
		'style=\'color: red;padding-top:10px\' >*</span> 选多行 </label>',
	}];
	$(document).ready(function () {
        $("#ifMultiple_btn").parent().wrapInner("<div id= \"ifMultiple_toolbar\" style=\"align-items: center;\"></div>");
        $("#ifMultiple_toolbar").css({display:"flex"});
		$('<input class="easyui-checkbox" type="checkbox" id="ifMultiple" value="1" style="width: 15px;height: 15px;margin-top: 0px;padding-top: 0px;"></input>').appendTo("#ifMultiple_toolbar");
	});

 后来看了一下别人有更简单的方法实现，我的方法可能不是最佳方案，但是作为一种思路也粘贴出来吧。

	$(document).ready(function () {
        $("#ifMultiple_btn").parent().wrapInner("<div id= \"ifMultiple_toolbar\" style=\"align-items: center;\"></div>");
        $("#ifMultiple_toolbar").css({display:"flex"});
		$('<input class="hisui-checkbox" type="checkbox" id="ifMultiple" style="width: 15px;height: 15px;margin-top: 0px;padding-top: 0px;"></input>').appendTo("#ifMultiple_toolbar");
		$("#ifMultiple_btn").removeAttr("class");  //取消点击
		//自定义checkbox加change事件	
		$('#ifMultiple').change(function() {
			if($(this).is(':checked')){
				alert("选中啦")
			}else{
				alert("木有选中啦")
			}
		});		
	});

更新了一下，可以实现change事件