easyui datagrid 上下移动数据排序

先上图:


image.png

其实难也不难,只是分享出来,大家以后遇到了直接Copy,方便大家。

 <table class="maintable" cellpadding="8">
        <tr>
            <td width="40" rowspan="2"><input type="checkbox" name="chkTime" id="chkTime" /></td>
            <td width="100">
                订单商品组合维度:
            </td>
            <td>
                <font color="red"> (*设置前请与仓库沟通需求,对仓库的发货效率有很好的帮助)</font>
            </td>
            <td>
                <a href="javascript:saveRebateSteps()" class="easyui-linkbutton" id="btn" style="width: 120px; height: 24px;" iconcls="icon-add">添加组合维度</a>
            </td>
        </tr>
        <tr>
            <td colspan="3">
                <table width="60%">
                    <tr>
                        <td>
                            <table id="easyui-datagrid-RebateSteps" class="easyui-datagrid"></table>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>

//添加商品组合sku的弹框。
<div id="dlg-SKUCombin" class="easyui-dialog" title="添加商品组合维度" data-options="closed:true,iconCls:'icon-edit',buttons: [{
                    text:'确定',
                    iconCls:'icon-ok',
                    handler:addRebateSteps
                },{
                    text:'关闭',
                    iconCls:'icon-no',
                    handler:function(){
                        $('#dlg-SKUCombin').dialog('close');
                    }
                }]"
     style="width:300px; height: 200px; padding: 10px;">
    <fieldset>
        <legend>组合信息</legend>
        <table>
            <tr>
                <td>商品种类:</td>
                <td>
                    <input id="txtGategory" class="easyui-numberbox" min="0" max="100" type="text" data-options="prompt:'商品种类'" style="width: 140px;" name="name" />
                </td>
            </tr>
            <tr>
                <td>商品数量</td>
                <td>
                    <input id="txtQuantity" class="easyui-numberbox" min="0" max="100" type="text" data-options="prompt:'商品数量'" style="width: 140px;" name="name" />
                </td>
            </tr>
        </table>
    </fieldset>
</div>
<script type="text/javascript">
    var rebateSteps = [];

    //新增订单组合维度
    function addRebateSteps() {
        var gategory = $('#txtGategory').numberbox('getValue');
        var quantity = $('#txtQuantity').numberbox('getValue');
        if (gategory.length <= 0 || quantity.length <= 0) return;

        var data = $('#easyui-datagrid-RebateSteps').datagrid('getData');
        var sort = data.rows.length + 1;//当前数据增加1

        var obj = new Object();
        obj.Gategory = gategory;
        obj.Quantity = quantity;
        obj.SortCode = sort;
        obj.Sort = sort;
        obj.Id = sort;

        //校验是否重复添加
        for (var i = 0; i < rebateSteps.length; i++) {
            if (rebateSteps[i].Gategory == obj.Gategory && rebateSteps[i].Quantity == obj.Quantity) {
                return;
            }
        }

        if (rebateSteps == null) rebateSteps = new Array();
        rebateSteps.push(obj);
        $('#easyui-datagrid-RebateSteps').datagrid('loadData', rebateSteps);
    }

    function removeRebateSteps(id) {
        //删除
        if (rebateSteps == null) rebateSteps = new Array();
        else {
            //剔除当前对象
            var t = [];
            for (var i = 0; i < rebateSteps.length; i++) {
                if (rebateSteps[i].Id != id) {
                    if (rebateSteps[i].Id > id) {
                        rebateSteps[i].Id = rebateSteps[i].Id - 1;
                        rebateSteps[i].SortCode = rebateSteps[i].SortCode - 1;
                        rebateSteps[i].Sort = rebateSteps[i].Sort - 1;
                    }
                    t.push(rebateSteps[i]);
                }
            }
            rebateSteps = t;
        }
        $('#easyui-datagrid-RebateSteps').datagrid('loadData', rebateSteps);
    }

    //改变排序
    function changeRebateCode(id, isUp) {
        if (rebateSteps == null) rebateSteps = new Array();
        if (rebateSteps.length == id && !isUp) return;
        if (id == 1 && isUp) return;

        if (isUp) {
            //上移动
            rebateSteps[id - 1].Id = id - 1;
            rebateSteps[id - 1].SortCode = id - 1;
            rebateSteps[id - 1].Sort = id - 1;

            rebateSteps[id - 2].Id = id;
            rebateSteps[id - 2].SortCode = id;
            rebateSteps[id - 2].Sort = id;
        }
        else {
            //下移动
            rebateSteps[id - 1].Id = id + 1;
            rebateSteps[id - 1].SortCode = id + 1;
            rebateSteps[id - 1].Sort = id + 1;

            rebateSteps[id].Id = id;
            rebateSteps[id].SortCode = id;
            rebateSteps[id].Sort = id;
        }

        rebateSteps.sort(function (a, b) {
            return a.SortCode - b.SortCode
        });

        $('#easyui-datagrid-RebateSteps').datagrid('loadData', rebateSteps);
    }
</script>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容