eaysui 利用datagrid 实现左右移除数据

效果图

$(function () {  

var logBussnessAgentData = [];  

var logInspectionEngineerData = [];  

//选中  

    $("#btnRight").click(function () {  

var data_left = $('#datagrid_left').datagrid('getChecked');  

var data_rigt = $('#datagrid_right').datagrid('getRows');  

var data_rigt_count = data_rigt.length;  

if (data_left) {  

if (data_left.length > 0) {  

var flag = 0;  

for (var i = data_left.length - 1; i >= 0; i--) {  

if (data_rigt_count > 0) {  

                        flag = 0;  

for (var j = data_rigt.length - 1; j >= 0; j--) {  

if (data_left[i].ID == data_rigt[j].ID) {  

                                flag = 1;  

continue;  

                            }  

                        }  

if (flag == 0) {  

var DutyRangeAgentObj = new Object();  

                            DutyRangeAgentObj.ID = data_left[i].ID;  

                            DutyRangeAgentObj.AuthorityCode = data_left[i].AuthorityCode;  

                            DutyRangeAgentObj.AuthorityName = data_left[i].AuthorityName;  

                            logInspectionEngineerData.push(DutyRangeAgentObj);  

var rowIndexlogSearch = $('#datagrid_left').datagrid('getRowIndex', data_left[i]);  

                            $('#datagrid_left').datagrid('deleteRow', rowIndexlogSearch);  

                        }  

else {  

var rowIndexlogSearch = $('#datagrid_left').datagrid('getRowIndex', data_left[i]);  

if (rowIndexlogSearch > -1) {  

                                $('#datagrid_left').datagrid('deleteRow', rowIndexlogSearch);  

                            }  

                        }  

                    } else {  

var DutyRangeAgentObj = new Object();  

                        DutyRangeAgentObj.ID = data_left[i].ID;  

                        DutyRangeAgentObj.AuthorityCode = data_left[i].AuthorityCode;  

                        DutyRangeAgentObj.AuthorityName = data_left[i].AuthorityName;  

                        logInspectionEngineerData.push(DutyRangeAgentObj);  

var rowIndexlogSearch = $('#datagrid_left').datagrid('getRowIndex', data_left[i]);  

                        $('#datagrid_left').datagrid('deleteRow', rowIndexlogSearch);  

                    }  

                }  

                $("#datagrid_right").datagrid("loadData", logInspectionEngineerData);  

            }  

else {  

                $.messager.alert('警告', '请选择要设置的权限', "warning");  

return;  

            }  

        }  

    });  

//移除  

    $("#btnLeft").click(function () {  

var DataRight = $('#datagrid_right').datagrid('getChecked');  

var DataRight_Count = DataRight.length;  

if (DataRight) {  

if (DataRight_Count > 0) {  

                $.each(DataRight, function (index, item) {  

var rowIndexlogSearch = $('#datagrid_right').datagrid('getRowIndex', item);  

                    $('#datagrid_right').datagrid('deleteRow', rowIndexlogSearch);  

                });  

            }  

else {  

                $.messager.alert('警告', '请选择要删除数据', "warning");  

return;  

            }  

        }  

    });  

//选中全部  

    $("#btnRightAll").click(function () {  

var data_left = $('#datagrid_left').datagrid('getRows');  

var data_right = $('#datagrid_right').datagrid('getRows');  

var data_right_count = data_right.length;  

if (data_left) {  

if (data_left.length > 0) {  

var flag = 0;  

for (var i = data_left.length - 1; i >= 0; i--) {  

if (data_right_count > 0) {  

                        flag = 0;  

for (var j = data_right.length - 1; j >= 0; j--) {  

if (data_left[i].ID == data_right[j].ID) {  

                                flag = 1;  

continue;  

//return true;  

                            }  

                        }  

if (flag == 0) {  

var DutyRangeAgentObj = new Object();  

                            DutyRangeAgentObj.ID = data_left[i].ID;  

                            DutyRangeAgentObj.AuthorityCode = data_left[i].AuthorityCode;  

                            DutyRangeAgentObj.AuthorityName = data_left[i].AuthorityName;  

                            logBussnessAgentData.push(DutyRangeAgentObj);  

var rowIndexlogSearch = $('#datagrid_left').datagrid('getRowIndex', data_left[i]);  

                            $('#datagrid_left').datagrid('deleteRow', rowIndexlogSearch);  

                        }  

else {  

var rowIndexlogSearch = $('#datagrid_left').datagrid('getRowIndex', data_left[i]);  

if (rowIndexlogSearch > -1) {  

                                $('#datagrid_left').datagrid('deleteRow', rowIndexlogSearch);  

                            }  

                        }  

                    } else {  

var DutyRangeAgentObj = new Object();  

                        DutyRangeAgentObj.ID = data_left[i].ID;  

                        DutyRangeAgentObj.AuthorityCode = data_left[i].AuthorityCode;  

                        DutyRangeAgentObj.AuthorityName = data_left[i].AuthorityName;  

                        logBussnessAgentData.unshift(DutyRangeAgentObj);  

var rowIndexlogSearch = $('#datagrid_left').datagrid('getRowIndex', data_left[i]);  

                        $('#datagrid_left').datagrid('deleteRow', rowIndexlogSearch);  

                    }  

                }  

                $("#datagrid_right").datagrid("loadData", logBussnessAgentData);  

            }  

else {  

                $.messager.alert('警告', '请选择要设置的权限', "warning");  

return;  

            }  

        }  

    });  

//移除全部  

    $("#btnLeftAll").click(function () {  

var datagrid_right = $('#datagrid_right').datagrid('getRows');  

var datagrid_right_count = datagrid_right.length;  

if (datagrid_right) {  

if (datagrid_right_count > 0) {  

                $.each(datagrid_right, function (index, item) {  

var rowIndexlogSearch = $('#datagrid_right').datagrid('getRowIndex', item);  

                    $('#datagrid_right').datagrid('deleteRow', rowIndexlogSearch);  

                });  

            }  

else {  

                msg.alertMsg("请选择要删除数据！");  

return;  

            }  

        }  

    });  

//查询  

    $("#btn_search2").click(function () {  

        $('#datagrid_left').datagrid('load', {  

            syscode: $.trim($('#q_systemcode').val()),  

            code: $.trim($('#q_authoritycode2').val()),  

            name: $.trim($('#q_authorityname2').val())  

        });  

    });  

//左表格  

    $('#datagrid_left').datagrid({  

        width: 300,  

        height: 200,  

        url: '/bll/RoleAuthority.ashx',  

        rownumbers: true,  

        singleSelect: false,  

        loadMsg: "正在努力加载数据，请稍后...",  

        striped: true,  

        collapsible: false,  

        animate: true,  

        columns: [[  

            { field: 'ck', checkbox: true },  

            { field: 'ID', title: 'ID', hidden: true },  

            {  

                title: '权限代码', field: 'AuthorityCode', align: 'left', width: 100  

            },  

            {  

                title: '权限名称', field: 'AuthorityName', align: 'left', width: 150  

            }  

        ]]  

    });  

/*保存设置权限*/  

    $('#authority_power').dialog({  

        width: 670,  

        title: '角色权限配置',  

        modal: true,  

        closed: true,  

        iconCls: 'icon-user-add',  

        buttons: [{  

            text: '提交',  

            iconCls: 'icon-add',  

            handler: function () {  

var rightData = $('#datagrid_right').datagrid('getRows');   

var order = [];  

                $.each(rightData, function (index, item) {  

                    order.push(item.ID);  

                });  

var values = order.join('$');  

                $.getJSON('/bll/RoleAuthority.ashx',  

                {  

                    step: "set",  

                    id: $("#hid_id2").val(),  

                    systemcode_edit: $('#systemcode_edit').val(),  

                    powerids: values  

                }, function (json) {  

var msg = eval(json);  

                    console.log("111返回数据：" + JSON.stringify(msg));  

if (parseInt(msg.result) == 1) {  

                        $.messager.show({  

                            title: '提示',  

                            msg: '权限设置成功'  

                        });  

                        $('#authority_edit').dialog('close').form('reset');  

                        $('#authority').datagrid('reload');  

                    } else {  

                        $.messager.alert('权限设置失败！', msg.message, 'warning');  

                    }  

                });  

            }  

        }, {  

            text: '取消',  

            iconCls: 'icon-redo',  

            handler: function () {  

                $('#authority_add').dialog('close').form('reset');  

            }  

        }]  

    });  

}); 

 

 

 

<form id="authority_power" style="margin: 0; padding: 5px 0 0 5px; color: #333;">   

<input id="hid_id2" type="hidden" value="" />  

<div style="padding:5px;">  

<label style="margin-left: 10px">权限代号：</label><input type="text" class="textbox" id="q_authoritycode2" style="width: 110px"/>  

<label style="margin-left: 10px">权限名称：</label><input type="text" class="textbox" id="q_authorityname2" style="width: 110px"/>  

<input id="btn_search2" type="button" value="查询" />  

</div>  

<div>  

<table>  

<tr>  

<td>  

<table id="datagrid_left"></table>   

</td>  

<td>  

<table style="width: 30px;">  

<tr>  

<td>  

<a id="btnRight" title="选中" href="javascript:void(0);">  

<img src="../libs/static/easyui/themes/default/images/arrow_right.png" alt="选中" /></a>  

</td>  

</tr>  

<tr>  

<td>  

<a id="btnLeft" title="移除"  href="javascript:void(0);">  

<img src="../libs/static/easyui/themes/default/images/arrow_left.png"  alt="移除"  /></a>  

</td>  

</tr>  

<tr>  

<td>  

1. <a id="btnRightAll" title="选中全部"  href="javascript:void(0);">  
2. <img src="../libs/static/easyui/themes/default/images/resultset_last.png"  alt="选中全部"  /></a>  
3. </td>  
4. </tr>  
5. <tr>  
6. <td>  
7. <a id="btnLeftAll" title="移除全部"  href="javascript:void(0);">  
8. <img src="../libs/static/easyui/themes/default/images/resultset_first.png" alt="移除全部"  /></a>  
9. </td>  
10. </tr>  
11. </table>  
12. </td>  
13. <td>   
14. <table id="datagrid_right"></table>  
15. </td>  
16. </tr>  
17. </table>  
18. </div>   
19. </form>