效果图:
今天遇到需要给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事件