easyui datagrid 上下移動(dòng)數(shù)據(jù)排序

先上圖:


image.png

其實(shí)難也不難戈稿,只是分享出來斗这,大家以后遇到了直接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"> (*設(shè)置前請與倉庫溝通需求洪添,對倉庫的發(fā)貨效率有很好的幫助)</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:'關(guān)閉',
                    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>商品數(shù)量</td>
                <td>
                    <input id="txtQuantity" class="easyui-numberbox" min="0" max="100" type="text" data-options="prompt:'商品數(shù)量'" 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;//當(dāng)前數(shù)據(jù)增加1

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

        //校驗(yàn)是否重復(fù)添加
        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 {
            //剔除當(dāng)前對象
            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) {
            //上移動(dòng)
            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 {
            //下移動(dòng)
            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>
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市干奢,隨后出現(xiàn)的幾起案子痊焊,更是在濱河造成了極大的恐慌,老刑警劉巖忿峻,帶你破解...
    沈念sama閱讀 217,657評論 6 505
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件薄啥,死亡現(xiàn)場離奇詭異,居然都是意外死亡逛尚,警方通過查閱死者的電腦和手機(jī)垄惧,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,889評論 3 394
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來绰寞,“玉大人到逊,你說我怎么就攤上這事÷饲” “怎么了觉壶?”我有些...
    開封第一講書人閱讀 164,057評論 0 354
  • 文/不壞的土叔 我叫張陵,是天一觀的道長件缸。 經(jīng)常有香客問我铜靶,道長,這世上最難降的妖魔是什么他炊? 我笑而不...
    開封第一講書人閱讀 58,509評論 1 293
  • 正文 為了忘掉前任争剿,我火速辦了婚禮,結(jié)果婚禮上佑稠,老公的妹妹穿的比我還像新娘秒梅。我一直安慰自己,他們只是感情好舌胶,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,562評論 6 392
  • 文/花漫 我一把揭開白布捆蜀。 她就那樣靜靜地躺著,像睡著了一般幔嫂。 火紅的嫁衣襯著肌膚如雪辆它。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,443評論 1 302
  • 那天履恩,我揣著相機(jī)與錄音锰茉,去河邊找鬼。 笑死切心,一個(gè)胖子當(dāng)著我的面吹牛飒筑,可吹牛的內(nèi)容都是我干的片吊。 我是一名探鬼主播,決...
    沈念sama閱讀 40,251評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼协屡,長吁一口氣:“原來是場噩夢啊……” “哼俏脊!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起肤晓,我...
    開封第一講書人閱讀 39,129評論 0 276
  • 序言:老撾萬榮一對情侶失蹤爷贫,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后补憾,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體漫萄,經(jīng)...
    沈念sama閱讀 45,561評論 1 314
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,779評論 3 335
  • 正文 我和宋清朗相戀三年盈匾,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了腾务。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 39,902評論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡威酒,死狀恐怖窑睁,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情葵孤,我是刑警寧澤担钮,帶...
    沈念sama閱讀 35,621評論 5 345
  • 正文 年R本政府宣布,位于F島的核電站尤仍,受9級特大地震影響箫津,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜宰啦,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,220評論 3 328
  • 文/蒙蒙 一苏遥、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧赡模,春花似錦田炭、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,838評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至辆布,卻和暖如春瞬矩,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背锋玲。 一陣腳步聲響...
    開封第一講書人閱讀 32,971評論 1 269
  • 我被黑心中介騙來泰國打工景用, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人惭蹂。 一個(gè)月前我還...
    沈念sama閱讀 48,025評論 2 370
  • 正文 我出身青樓伞插,卻偏偏與公主長得像割粮,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個(gè)殘疾皇子蜂怎,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,843評論 2 354

推薦閱讀更多精彩內(nèi)容