亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

layui 數(shù)據(jù)表格拖動(dòng) 列、行 位置重新排序功能實(shí)現(xiàn)

 更新時(shí)間:2024年06月14日 11:29:09   作者:小二·  
這篇文章主要介紹了layui數(shù)據(jù)表格拖動(dòng)列、行位置重新排序功能實(shí)現(xiàn),本文通過實(shí)例代碼給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧

先貼官網(wǎng) layui官網(wǎng) ;

再貼一個(gè)要使用的 插件官網(wǎng) : layui-soul-table 示例文檔 ;

這個(gè)插件功能很多 

看到那個(gè)下載 后悔沒早點(diǎn)知道啊 還自己寫了 一個(gè)下載 

可以到官網(wǎng)看看 很多實(shí)用的 

需要引入的 js  

layui.config({
    base: rootPath,
    version: true
}).extend({
    //  自定義擴(kuò)展
    soulTable: 'three-modules/soul-Table/soulTable.slim',   // soulTable表格擴(kuò)展( 要使用soulTable必須先引入當(dāng)前文件)
    tableChild: 'three-modules/soul-Table/tableChild',     //  soulTable子表擴(kuò)展
    tableMerge: 'three-modules/soul-Table/tableMerge',     // soulTable合并單元格擴(kuò)展
    tableFilter: 'three-modules/soul-Table/tableFilter',   // soulTable篩選擴(kuò)展
    excel: 'three-modules/soul-Table/excel',               // soulTable導(dǎo)出excel擴(kuò)展
});

官網(wǎng)上也是這樣引入的 統(tǒng)一管理的 所以 很友好 能有 直接添加到自己的增加的后面  

遇到的問題 就是 排序 因?yàn)槲业臄?shù)據(jù)表格中 主要是要獲取但當(dāng)前的排序 

拖動(dòng)后更改位置 當(dāng)前的能夠顯示出來 

根據(jù)給的獲取數(shù)據(jù) 

 let oldIndex = obj.oldIndex; // 原來的數(shù)據(jù)索引
                                let newIndex = obj.newIndex;  // 改動(dòng)后數(shù)據(jù)索引
                                let modifiedRow = obj.row;   // 修改行數(shù)據(jù)
                                let cache = obj.cache; // 改動(dòng)后全表數(shù)據(jù)

然后判斷移動(dòng)了多少 進(jìn)行重載渲染:  我的字段名稱是 xlh 能使用的話 換成自己的就行了 

 // 首先,找到修改行在全表數(shù)據(jù)中的索引,以便后續(xù)直接操作
                                let modifiedRowIndex = cache.findIndex(row => row.xlh === modifiedRow.xlh && row.fdname === modifiedRow.fdname);
                                // 確保找到了對(duì)應(yīng)的行
                                if (modifiedRowIndex !== -1) {
                                    // 如果移動(dòng)是向前(oldIndex > newIndex),則需要減少中間行的xlh
                                    if (oldIndex > newIndex) {
                                        for (let i = newIndex + 1; i < oldIndex; i++) {
                                            cache[i].xlh--;
                                        }
                                    }
                                    // 如果是向后移動(dòng)(oldIndex < newIndex),則需要增加中間行的xlh
                                    else if (oldIndex < newIndex) {
                                        for (let i = oldIndex; i < newIndex; i++) {
                                            cache[i].xlh++;
                                        }
                                    }
                                    // 直接根據(jù)新的索引位置更新修改行的xlh
                                    modifiedRow.xlh = newIndex + 1;
                                    // 更新 cache 中對(duì)應(yīng)行的數(shù)據(jù)(雖然實(shí)際上可能不需要,因?yàn)榧僭O(shè) cache 已經(jīng)是最新的)
                                    // 但這里為了演示邏輯完整性,我們模擬更新操作
                                    cache[modifiedRowIndex] = modifiedRow;
                                    // 重新遍歷并確保所有行的xlh正確無誤(這一步在大多數(shù)情況下可能不需要,因?yàn)槲覀円呀?jīng)針對(duì)性調(diào)整了受影響的部分)
                                    // 但為了確保邏輯完整性,保留此步驟
                                    cache.forEach((row, index) => {
                                        row.xlh = index + 1; // 確保每個(gè)xlh與索引對(duì)應(yīng)
                                    });
                                    // console.log("根據(jù)新順序更新xlh后的全表數(shù)據(jù):", cache);
                                } else {
                                    console.error("在全表數(shù)據(jù)中未找到對(duì)應(yīng)的修改行");
                                }
                                // console.log("根據(jù)最終順序更新xlh后的數(shù)據(jù):", cache);
                                table.reloadData('表id', {
                                    data: cache
                                });

到此這篇關(guān)于layui 數(shù)據(jù)表格拖動(dòng) 列、行 位置重新排序功能實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)layui 數(shù)據(jù)表格拖動(dòng)重新排序內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

最新評(píng)論