easyui datagrid 多列checkbox

最新推荐文章于 2022-04-20 11:54:29 发布

张漂亮’s Blog

最新推荐文章于 2022-04-20 11:54:29 发布

阅读量522

点赞数

分类专栏：前端文章标签： checkbox easyui

本文链接：https://blog.csdn.net/zxjdC/article/details/113767591

版权

前端专栏收录该内容

16 篇文章 0 订阅

订阅专栏

需求

如图，实现表格中多列复选框，做【选中】、【取消】操作时勾选与取消复选框。
在这里插入图片描述

前端

<body>
<div id="datagrid_toolbar">
    <div class="buttons-preview text-right">
        <a class="btn btn-success  btn-sm"
           href="javascript:save()"><i class="fa fa-save"></i>保存</a>        
    </div>
</div>
<table id="data_table" class="easyui-datagrid"
       data-options="
	                   url: '${basePath}/admin/policy/getPolicyConfig?policyId=${policyId}',
	                   method: 'get',
	                   rownumbers: true,
	                   border:'1',
	                   fitColumns: true,
	                   fit:true,
	                   striped: true,
	                   <#--pagination:true,-->
	                   <#--pageSize:'20',-->
	                   onClickRow:clickChange,
	                   idField: 'id',
	                   singleSelect: true,
	                   toolbar:'#datagrid_toolbar'
	               ">
    <thead>
    <tr>
        <th data-options="field:'id',width:100,hidden:true">id</th>
        <th data-options="field:'policyName',width:150,align:'center'">策略名称</th>
        <th data-options="field:'operateKey',width:150,align:'center'">操作key</th>
        <th data-options="field:'operateDesc',width:150,align:'center'">操作名称</th>
        <th data-options="field:'roleAdmin',width:150,formatter:a,align:'center'">管理员</th>
        <th data-options="field:'roleDirector',width:150,formatter:b,align:'center'">集市负责人</th>
        <th data-options="field:'roleCreate',width:150,formatter:c,align:'center'">创建者</th>
        <th data-options="field:'roleDevelop',width:150,formatter:d,align:'center'">开发者</th>
        <th data-options="field:'roleParticipant',width:150,formatter:e,align:'center'">集市参与人</th>
    </tr>
    </thead>
</table>
</body>


    function clickChange(index,row){
        $('#data_table').datagrid('clearSelections');
        if($('#a_'+index).get(0).checked){
            row.roleAdmin = true;
        }else{
            row.roleAdmin = false;
        }
        if($('#b_'+index).get(0).checked){
            row.roleDirector = true;
        }else{
            row.roleDirector = false;
        }
        if($('#c_'+index).get(0).checked){
            row.roleCreate = true;
        }else{
            row.roleCreate = false;
        }
        if($('#d_'+index).get(0).checked){
            row.roleDevelop = true;
        }else{
            row.roleDevelop = false;
        }
        if($('#e_'+index).get(0).checked){
            row.roleParticipant = true;
        }else{
            row.roleParticipant = false;
        }
    }
    function a(value, rowData, rowIndex){
        if(!value){
            return '<input type="checkbox"  id="a_'+rowIndex+'" />';
        }else{
            return '<input type="checkbox"   id="a_'+rowIndex+'" checked = "checked"/>';
        }
    }
    function b(value, rowData, rowIndex){
        if(!value){
            return '<input type="checkbox"  id="b_'+rowIndex+'" />';
        }else{
            return '<input type="checkbox"   id="b_'+rowIndex+'" checked = "checked"/>';
        }
    }
    function c(value, rowData, rowIndex){
        if(!value){
            return '<input type="checkbox"  id="c_'+rowIndex+'" />';
        }else{
            return '<input type="checkbox"   id="c_'+rowIndex+'" checked = "checked"/>';
        }
    }
    function d(value, rowData, rowIndex){
        if(!value){
            return '<input type="checkbox"  id="d_'+rowIndex+'" />';
        }else{
            return '<input type="checkbox"   id="d_'+rowIndex+'" checked = "checked"/>';
        }
    }
    function e(value, rowData, rowIndex){
        if(!value){
            return '<input type="checkbox"  id="e_'+rowIndex+'" />';
        }else{
            return '<input type="checkbox"   id="e_'+rowIndex+'" checked = "checked"/>';
        }
    }



    function save() {
        var data = $('#data_table').datagrid('getData');
        $.ajax({
            url: "${basePath}/admin/policy/savePolicyConfig",
            data: {
                configs: JSON.stringify(data.rows),
                policyId: data.rows[0].policyId
            },
            dataType: "json",
            success: function (data) {
                if (data.header.flag) {
                    Notify(data.body, 'top-right', '5000', 'info', 'fa-bolt', true);
                    $("#data_table").datagrid("reload");
                } else {
                    Notify(data.header.msg, 'top-right', '5000', 'danger', 'fa-bolt', true);
                }
            },
            error: function () {
                Notify("服务器异常", 'top-right', '5000', 'danger', 'fa-bolt', true)
            }
        });
    }

后端

   @RequestMapping("savePolicyConfig")
    @ResponseBody
    public Object savePolicyConfig(String configs,Integer policyId, HttpServletRequest request){
        JSONArray array = JSON.parseArray(configs);
        boolean result = policyConfigService.addPolicyConfig(array, policyId);
        return result?success("添加配置成功！"):error("500","添加配置失败！");
    }

 @Override
    @Transactional(rollbackFor = Exception.class)
    public boolean addPolicyConfig(JSONArray array, Integer policyId) {
        try{
            //1.删除policyId对应的所有策略配置项
            this.delByPolicyId(policyId);

            //2.新增array中的所有配置
            for (Object o : array) {
                JSONObject jsonObject = JSONObject.parseObject(o.toString());
                BdmPolicyCongigPo po = JSONObject.toJavaObject(jsonObject,BdmPolicyCongigPo.class);
                this.insert(po);
            }
            return true;
        }catch(Exception e){
            e.printStackTrace();
            return false;
        }

    }

张漂亮’s Blog

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
easyui datagrid 多列checkbox

需求如图，实现表格中多列复选框，做【选中】、【取消】操作时勾选与取消复选框。前端<body><div id="datagrid_toolbar"> <div class="buttons-preview text-right"> <a class="btn btn-success btn-sm" href="javascript:save()"><i class="fa fa-save">&
复制链接

扫一扫