鍍金池/ 問答/HTML/ js 數(shù)組元素置頂以及取消置頂數(shù)組元素回歸到原始位置

js 數(shù)組元素置頂以及取消置頂數(shù)組元素回歸到原始位置

圖片描述

window.products = [{
        msg: '此時此刻,我想你了1',
        publicPreson: '張穎',
        phone: '13811209509',
        checkOut: '21',
        isState: '是',
        releaseTime: '2018-05-02 13:14',
        creationTime: '2018-05-02 13:14',
        onClick: ['查看', '刪除', '編輯', '置頂'],
        isTop:false,
        isShow:true
    }, {
        msg: '此時此刻,我想你了2',
        publicPreson: '張靚穎',
        phone: '13811209509',
        checkOut: '31',
        isState: '是',
        releaseTime: '2018-05-02 13:14',
        creationTime: '2018-05-02 13:14',
        isTop:false,
        isShow:true
    }, {
        msg: '此時此刻,我想你了3',
        publicPreson: '鄧紫棋',
        phone: '13811209509',
        checkOut: '41',
        isState: '否',
        releaseTime: '2018-05-02 13:14',
        creationTime: '2018-05-02 13:14',
        isTop:false,
        isShow:true
    }, {
        msg: '此時此刻,我想你了4',
        publicPreson: '小豬',
        phone: '13811209509',
        checkOut: '51',
        isState: '是',
        releaseTime: '2018-05-02 13:14',
        creationTime: '2018-05-02 13:14',
        isTop:false,
        isShow:true
    }, {
        msg: '此時此刻,我想你了5',
        publicPreson: '易燃',
        phone: '13811209509',
        checkOut: '121',
        isState: '否',
        releaseTime: '2018-05-02 13:14',
        creationTime: '2018-05-02 13:14',
        isTop:false,
        isShow:true
    }];
    var initListObj = {};
    initListObj.list = products;

    render('dynamic_management', initListObj, '#tableCon');

html:
<tbody>

                    {{each list as value index}}
                    {{if value.isShow === true}}
                    <tr data-index="{{index}}">
                        <td>{{index+1}}</td>
                        <td>{{value.msg}}</td>
                        <td>{{value.publicPreson}}</td>
                        <td>{{value.phone}}</td>
                        <td>{{value.checkOut}}</td>
                        <td>{{value.isState}}</td>
                        <td>{{value.releaseTime}}</td>
                        <td>{{value.creationTime}}</td>
                        <td>
                            <span class="checkOut" onclick="checkOut({{index}})">查看</span> |
                            <span class="del" onclick="delThis({{index}})">刪除</span> |
                            <span class="edit" onclick="editCon({{index}})">編輯</span> |
                            {{if value.isTop === false}}
                            <span class="setTop" onclick="setTop(this,{{index}})">置頂</span>
                            {{else}}
                            <span class="setTop" onclick="cancelTop(this,{{index}})">取消置頂</span>
                            {{/if}}
                        </td>
                    </tr>
                    {{/if}}
                    {{/each}}

                </tbody>
// 置頂內(nèi)容
function setTop(obj,index) {
    var setTopObj = products[index];
    setTopObj.isTop = true;
    
    products.unshift(setTopObj);
    products.splice(index+1,1);
    console.log(products);
    var initListObj = {};
    initListObj.list = products;

    render('dynamic_management', initListObj, '#tableCon');
}
取消置頂
function cancelTopTop(obj,index) {
    
    var initListObj = {};
    initListObj.list = products;

    render('dynamic_management', initListObj, '#tableCon');
}

當(dāng)我們點擊某一行的置頂時,通過操作數(shù)組,讓改行的對象移動到數(shù)組第一個,讓該行移動到table的最上面,當(dāng)點擊取消置頂時,讓該對象回到原來的數(shù)組排序中,我們應(yīng)該怎么操作,現(xiàn)在我無法獲取數(shù)組對象原始的位置,各位大神請指教。

回答
編輯回答
朕略萌

在setTop里面吧index存起來不就好了,在cancelTopTop取這個存起來的index就是原始位置

2017年11月9日 16:15