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>
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容