easyui datagrid 多列复选及控制复选不可操作

最新推荐文章于 2022-10-25 16:22:45 发布

农妇山泉有点田-VIP

最新推荐文章于 2022-10-25 16:22:45 发布

阅读量1.4k

点赞数

文章标签： easyui多列复选控制复选不可操作 easyui多列复选及控制复选不可操作 easyui easyui datagrid 多列复选

本文链接：https://blog.youkuaiyun.com/qq_33164994/article/details/83445730

版权

一、例图：

在这里插入图片描述

二、jsp代码：

1、重写复选框样式

<style>
	/*重写复选框样式*/
    .moreCheckBox {
        margin-top: 5px !important;
    }
    input[type=checkbox] {
        width: 18px !important;
        height: 18px !important;
    }
</style>

2、对应的列

注意 formatter:moreCheckBox

<table data-toggle="topjui-datagrid"
       data-options="id:'weldNdeTrust',   <%--Id名称--%>
           singleSelect:true,             <%--可多选--%>
           selectOnCheck:false,           <%--点击行不勾选--%>
           checkOnSelect:false,           <%--勾选时不选中行--%>
           url:'${ctx}/weld/weldNdeTrust/getPageSet'">
    <thead>
	    <tr>
	         <th data-options="field:'autoId',title:'UUID',checkbox:true"></th>
	         <th data-options="field:'cxHoldSign',title:'冲洗保留',formatter: moreCheckBox"></th>
	         <th data-options="field:'holdSign',title:'试压保留',formatter: moreCheckBox"></th>
	         <th data-options="field:'zaiYuState',title:'是否在役',formatter: moreCheckBox"></th>
	         <th data-options="field:'ndeTrusted',title:'NDE委托',formatter: moreCheckBox"></th>
	    </tr>
    </thead>
</table>

3、对应的脚本

设置复选框不可点击，不可操作，readonly=“readonly” 设置不起作用用 οnclick=“return false;”

<script type="text/javascript">
    function moreCheckBox(value, rec, rowIndex) {
        var checked = "";
        if(value == 1){
            checked = "checked";
        };
        //readonly="readonly" 设置不起作用   用 onclick="return false;"
        return "<input type='checkbox' onclick='return false;' class='moreCheckBox' name='"  + this.field + rowIndex + "'" + checked +" >";
    }
</script>