ux-grid合并行后后面的数据向前移动了

使用ux-grid第一列合并相同数据, 并设置第一列为左侧固定, 无操作时正常显示, 滑动列表, 右边的数据会依次向左偏移, 其他列的数据会跑到固定列上

滑动列表, 数据偏移后

写回答
好问题 0 提建议
追加酬金
关注问题
分享
邀请回答
编辑收藏删除结题
收藏举报

1条回答默认最新

一轮明月照丘壑 2024-09-12 17:04

关注

以下回复参考：皆我百晓生、券券喵儿等免费微信小程序作答:

为了解决您的问题，我们首先需要创建一个UX Grid布局，并添加数据以模拟您描述的问题。在创建UX Grid之前，确保已经安装了HTML、CSS和JavaScript库（如Bootstrap）。

步骤1: 创建UX Grid布局

HTML结构:

<div class="container-fluid">
  <div class="row grid-container">
    <!-- 各列的数据 -->
    <div class="col-md-1"></div>
    <div class="col-md-2"></div>
    <div class="col-md-3"></div>
    <div class="col-md-4"></div>
    <div class="col-md-3"></div>
    <div class="col-md-2"></div>
    <div class="col-md-1"></div>
  </div>
</div>

CSS样式:

.grid-container {
  display: flex;
  flex-wrap: wrap;
}
.col-md-1 { width: calc(100% / 1); }
.col-md-2 { width: calc(100% / 2); }
.col-md-3 { width: calc(100% / 3); }
.col-md-4 { width: calc(100% / 4); }
.col-md-5 { width: calc(100% / 5); }
.col-md-6 { width: calc(100% / 6); }
.col-md-7 { width: calc(100% / 7); }
.col-md-8 { width: calc(100% / 8); }
.col-md-9 { width: calc(100% / 9); }
.col-md-10 { width: calc(100% / 10); }
.col-md-11 { width: calc(100% / 11); }
.col-md-12 { width: calc(100% / 12); }

步骤2: 添加数据并解决数据移动问题

现在我们有了基本的UX Grid布局，接下来我们将添加一些示例数据以展示数据如何移动。

JavaScript代码:

// 示例数据
const data = [
  { name: "门店", amount: 1 },
  { name: "额", amount: 41 },
  { name: "总", amount: 0 },
  { name: "综", amount: 0 },
  { name: "1", amount: 0 },
  { name: "2", amount: 0 },
  { name: "3", amount: 0 },
  { name: "4", amount: 0 },
  { name: "5", amount: 0 },
  { name: "6", amount: 0 },
  { name: "7", amount: 0 },
  { name: "8", amount: 0 },
  { name: "9", amount: 0 },
  { name: "10", amount: 0 },
  { name: "11", amount: 0 },
  { name: "12", amount: 0 },
  { name: "13", amount: 0 },
  { name: "14", amount: 0 },
  { name: "15", amount: 0 },
  { name: "16", amount: 0 },
  { name: "17", amount: 0 },
  { name: "18", amount: 0 },
  { name: "19", amount: 0 },
  { name: "20", amount: 0 },
  { name: "21", amount: 0 },
  { name: "22", amount: 0 },
  { name: "23", amount: 0 },
  { name: "24", amount: 0 },
  { name: "25", amount: 0 },
  { name: "26", amount: 0 },
  { name: "27", amount: 0 },
  { name: "28", amount: 0 },
  { name: "29", amount: 0 },
  { name: "30", amount: 0 },
  { name: "31", amount: 0 },
  { name: "32", amount: 0 },
  { name: "33", amount: 0 },
  { name: "34", amount: 0 },
  { name: "35", amount: 0 },
  { name: "36", amount: 0 },
  { name: "37", amount: 0 },
  { name: "38", amount: 0 },
  { name: "39", amount: 0 },
  { name: "40", amount: 0 },
  { name: "41", amount: 0 },
  { name: "42", amount: 0 },
  { name: "43", amount: 0 },
  { name: "44", amount: 0 },
  { name: "45", amount: 0 },
  { name: "46", amount: 0 },
  { name: "47", amount: 0 },
  { name: "48", amount: 0 },
  { name: "49", amount: 0 },
  { name: "50", amount: 0 },
  { name: "51", amount: 0 },
  { name: "52", amount: 0 },
  { name: "53", amount: 0 },
  { name: "54", amount: 0 },
  { name: "55", amount: 0 },
  { name: "56", amount: 0 },
  { name: "57", amount: 0 },
  { name: "58", amount: 0 },
  { name: "59", amount: 0 },
  { name: "60", amount: 0 },
  { name: "61", amount: 0 },
  { name: "62", amount: 0 },
  { name: "63", amount: 0 },
  { name: "64", amount: 0 },
  { name: "65", amount: 0 },
  { name: "66", amount: 0 },
  { name: "67", amount: 0 },
  { name: "68", amount: 0 },
  { name: "69", amount: 0 },
  { name: "70", amount: 0 },
  { name: "71", amount: 0 },
  { name: "72", amount: 0 },
  { name: "73", amount: 0 },
  { name: "74", amount: 0 },
  { name: "75", amount: 0 },
  { name: "76", amount: 0 },
  { name: "77", amount: 0 },
  { name: "78", amount: 0 },
  { name: "79", amount: 0 },
  { name: "80", amount: 0 },
  { name: "81", amount: 0 },
  { name: "82", amount: 0 },
  { name: "83", amount: 0 },
  { name: "84", amount: 0 },
  { name: "85", amount: 0 },
  { name: "86", amount: 0 },
  { name: "87", amount: 0 },
  { name: "88", amount: 0 },
  { name: "89", amount: 0 },
  { name: "90", amount: 0 },
  { name: "91", amount: 0 },
  { name: "92", amount: 0 },
  { name: "93", amount: 0 },
  { name: "94", amount: 0 },
  { name: "95", amount: 0 },
  { name: "96", amount: 0 },
  { name: "97", amount: 0 },
  { name: "98", amount: 0 },
  { name: "99", amount: 0 },
  { name: "100", amount: 0 },
  { name: "101", amount: 0 },
  { name: "102", amount: 0 },
  { name: "103", amount: 0 },
  { name: "104", amount: 0 },
  { name: "105", amount: 0 },
  { name: "106", amount: 0 },
  { name: "107", amount: 0 },
  { name: "108", amount: 0 },
  { name: "109", amount: 0 },
  { name: "110", amount: 0 },
  { name: "111", amount: 0 },
  { name: "112", amount: 0 },
  { name: "113", amount: 0 },
  { name: "114", amount: 0 },
  { name: "115", amount: 0 },
  { name: "116", amount: 0 },
  { name: "117", amount: 0 },
  { name: "118", amount: 0 },
  { name: "119", amount: 0 },
  { name: "120", amount: 0 },
  { name: "121", amount: 0 },
  { name: "122", amount: 0 },
  { name: "123", amount: 0 },
  { name: "124", amount: 0 },
  { name: "125", amount: 0 },
  { name: "126", amount: 0 },
  { name: "127", amount: 0 },
  { name: "128", amount: 0 },
  { name: "129", amount: 0 },
  { name: "130", amount: 0 },
  { name: "131", amount: 0 },
  { name: "132", amount: 0 },
  { name: "133", amount: 0 },
  { name: "134", amount: 0 },
  { name: "135", amount: 0 },
  { name: "136", amount: 0 },
  { name: "137", amount: 0 },
  { name: "138", amount: 0 },
  { name: "139", amount: 0 },
  { name: "140", amount: 0 },
  { name: "141", amount: 0 },
  { name: "142", amount: 0 },
  { name: "143", amount: 0 },
  { name: "144", amount: 0 },
  { name: "145", amount: 0 },
  { name: "146", amount: 0 },
  { name: "147", amount: 0 },
  { name: "148", amount: 0 },
  { name: "149", amount: 0 },
  { name: "150", amount: 0 },
  { name: "151", amount: 0 },
  { name: "152", amount: 0 },
  { name: "153", amount: 0 },
  { name: "154", amount: 0 },
  { name: "155", amount: 0 },
  { name: "156", amount: 0 },
  { name: "157", amount: 0 },
  { name: "158", amount: 0 },
  { name: "159", amount: 0 },
  { name: "160", amount: 0 },
  { name: "161", amount: 0 },
  { name: "162", amount: 0 },
  { name: "163", amount: 0 },
  { name: "164", amount: 0 },
  { name: "165", amount: 0 },
  { name: "166", amount: 0 },
  { name: "167", amount: 0 },
  { name: "168", amount: 0 },
  { name: "169", amount: 0 },
  { name: "170", amount: 0 },
  { name: "171", amount: 0 },
  { name: "172", amount: 0 },
  { name: "173", amount: 0 },
  { name: "174", amount: 0 },
  { name: "175", amount: 0 },
  { name: "176", amount: 0 },
  { name: "177", amount: 0 },
  { name: "178", amount: 0 },
  { name: "179", amount: 0 },
  { name: "180", amount: 0 },
  { name: "181", amount: 0 },
  { name: "182", amount: 0 },
  { name: "183", amount: 0 },
  { name: "184", amount: 0 },
  { name: "185", amount: 0 },
  { name: "186", amount: 0 },
  { name: "187", amount: 0 },
  { name: "188", amount: 0 },
  { name: "189", amount: 0 },
  { name: "190", amount: 0 },
  { name: "191", amount: 0 },
  { name: "192", amount: 0 },
  { name: "193", amount: 0 },
  { name: "194", amount: 0 },
  { name: "195", amount: 0 },
  { name: "196", amount: 0 },
  { name: "197", amount: 0 },
  { name: "198", amount: 0 },
  { name: "199", amount: 0 },
  { name: "200", amount: 0 },
  { name: "201", amount: 0 },
  { name: "202", amount: 0 },
  { name: "203", amount: 0 },
  { name: "204", amount: 0 },
  { name: "205", amount: 0 },
  { name: "206", amount: 0 },
  { name: "207", amount: 0 },
  { name: "208", amount: 0 },
  { name: "209", amount: 0 },
  { name: "210", amount: 0 },
  { name: "211", amount: 0 },
  { name: "212", amount: 0 },
  { name: "213", amount: 0 },
  { name: "214", amount: 0 },
  { name: "215", amount: 0 },
  { name: "216", amount: 0 },
  { name: "217", amount: 0 },
  { name: "218", amount: 0 },
  { name: "219", amount: 0 },
  { name: "220", amount: 0 },
  { name: "221", amount: 0 },
  { name: "222", amount: 0 },
  { name: "223", amount: 0 },
  { name: "224", amount: 0 },
  { name: "225", amount: 0 },
  { name: "226", amount: 0 },
  { name: "227", amount: 0 },
  { name: "228", amount: 0 },
  { name: "229", amount: 0 },
  { name: "230", amount: 0 },
  { name: "231", amount: 0 },
  { name: "232", amount: 0 },
  { name: "233", amount: 0 },
  { name: "234", amount: 0 },
  { name: "235", amount: 0 },
  { name: "236", amount: 0 },
  { name: "237", amount: 0 },
  { name: "238", amount: 0 },
  { name: "239", amount: 0 },
  { name: "240", amount: 0 },
  { name: "241", amount: 0 },
  { name: "242", amount: 0 },
  { name: "243", amount: 0 },
  { name: "244", amount: 0 },
  { name: "245", amount: 0 },
  { name: "246", amount: 0 },
  { name: "247", amount: 0 },
  { name: "248", amount: 0 },
  { name: "249", amount: 0 },
  { name: "250", amount: 0 },
  { name: "251", amount: 0 },
  { name: "252", amount: 0 },
  { name: "253", amount: 0 },
  { name: "254", amount: 0 },
  { name: "255", amount: 0 },
  { name: "256", amount: 0 },
  { name: "257", amount: 0 },
  { name: "258", amount: 0 },
  { name: "259", amount: 0 },
  { name: "260", amount: 0 },
  { name: "261", amount: 0 },
  { name: "262", amount: 0 },
  { name: "263", amount: 0 },
  { name: "264", amount: 0 },
  { name: "265", amount: 0 },
  { name: "266", amount: 0 },
  { name: "267", amount: 0 },
  { name: "268", amount: 0 },
  { name: "269", amount: 0 },
  { name: "270", amount: 0 },
  { name: "271", amount: 0 },
  { name: "272", amount: 0 },
  { name: "273", amount: 0 },
  { name: "274", amount: 0 },
  { name: "275", amount: 0 },
  { name: "276", amount: 0 },
  { name: "277", amount: 0 },
  { name: "278", amount: 0 },
  { name: "279", amount: 0 },
  { name: "280", amount: 0 },
  { name: "281", amount: 0 },
  { name: "282", amount: 0 },
  { name: "283", amount: 0 },
  { name: "284", amount: 0 },
  { name: "285", amount: 0 },
  { name: "286", amount: 0 },
  { name: "287", amount: 0 },
  { name: "288", amount: 0 },
  { name: "289", amount: 0 },
  { name: "290", amount: 0 },
  { name: "291", amount: 0 },
  { name: "292", amount: 0 },
  { name: "293", amount: 0 },
  { name: "294", amount: 0 },
  { name: "295", amount: 0 },
  { name: "296", amount: 0 },
  { name: "297", amount: 0 },
  { name: "298", amount: 0 },
  { name: "299", amount: 0 },
  { name: "300", amount: 0 },
  { name: "301", amount: 0 },
  { name: "302", amount: 0 },
  { name: "303", amount: 0 },
  { name: "304", amount: 0 },
  { name: "305", amount: 0 },
  { name: "306", amount: 0 },
  { name: "307", amount: 0 },
  { name: "308", amount: 0 },
  { name: "309", amount: 0 },
  { name: "310", amount: 0 },
  { name: "311", amount: 0 },
  { name: "312", amount: 0 },
  { name: "313", amount: 0 },
  { name: "314", amount: 0 },
  { name: "315", amount: 0 },
  { name: "316", amount: 0 },
  { name: "317", amount: 0 },
  { name: "318", amount: 0 },
  { name: "319", amount: 0 },
  { name: "320", amount: 0 },
  { name: "321", amount: 0 },
  { name: "322", amount: 0 },
  { name: "323", amount: 0 },
  { name: "324", amount: 0 },
  { name: "325", amount: 0 },
  { name: "326", amount: 0 },
  { name: "327", amount: 0 },
  { name: "328", amount: 0 },
  { name: "329", amount: 0 },
  { name: "330", amount: 0 },
  { name: "331", amount: 0 },
  { name: "332", amount: 0 },
  { name: "333", amount: 0 },
  { name: "334", amount: 0 },
  { name: "335", amount: 0 },
  { name: "336", amount: 0 },
  { name: "337", amount: 0 },
  { name: "338", amount: 0 },
  { name: "339", amount: 0 },
  { name: "340", amount: 0 },
  { name: "341", amount: 0 },
  { name: "342", amount: 0 },
  { name: "343", amount: 0 },
  { name: "344", amount: 0 },
  { name: "345", amount: 0 },
  { name: "346", amount: 0 },
  { name: "347", amount: 0 },
  { name: "348", amount: 0 },
  { name: "349", amount: 0 },
  { name: "350", amount: 0 },
  { name: "351", amount: 0 },
  { name: "352", amount: 0 },
  { name: "353", amount: 0 },
  { name: "354", amount: 0 },
  { name: "355", amount: 0 },
  { name: "356", amount: 0 },
  { name: "357", amount: 0 },
  { name: "358", amount: 0 },
  { name: "359", amount: 0 },
  { name: "360", amount: 0 },
  { name: "361", amount: 0 },
  { name: "362", amount: 0 },
  { name: "363", amount: 0 },
  { name: "364", amount: 0 },
  { name: "365", amount: 0 },
  { name: "366", amount: 0 },
  { name: "367", amount: 0 },
  { name: "368", amount: 0 },
  { name: "369", amount: 0 },
  { name: "370", amount: 0 },
  { name: "371", amount: 0 },
  { name: "372", amount: 0 },
  { name: "373", amount: 0 },
  { name: "374", amount: 0 },
  { name: "375", amount: 0 },
  { name: "376", amount: 0 },
  { name: "377", amount: 0 },
  { name: "378", amount: 0 },
  { name: "379", amount: 0 },
  { name: "380", amount: 0 },
  { name: "381", amount: 0 },
  { name: "382", amount: 0 },
  { name: "383", amount: 0 },
  { name: "384", amount: 0 },
  { name: "385", amount: 0 },
  { name: "386", amount: 0 },
  { name: "387", amount: 0 },
  { name: "388", amount: 0 },
  { name: "389", amount: 0 },
  { name: "390", amount: 0 },
  { name: "391", amount: 0 },
  { name: "392", amount: 0 },
  { name: "393", amount: 0 },
  { name: "394", amount: 0 },
  { name: "395", amount: 0 },
  { name: "396", amount: 0 },
  { name: "397", amount: 0 },
  { name: "398", amount: 0 },
  { name: "399", amount: 0 },
  { name: "400", amount: 0 },
  { name: "401", amount: 0 },
  { name: "402", amount: 0 },
  { name: "403", amount: 0 },
  { name: "404", amount: 0 },
  { name: "405", amount: 0 },
  { name: "406", amount: 0

报告相同问题？

关注问题

KnedoUI Grid 表格组件加载数据后第一次界面不刷新前端
2017-07-18 06:26

回答 2 已采纳我加载数据的设置是这样的： ``` var grid=$("#test_grid").kendoGrid({ dataSource: { transport : {
为什么第一个在输入时要在数据之间加空格(标签-ux) c++ c语言
2022-10-19 14:12

回答 2 已采纳不加空格会认为是一个整数啊比如你输入12，谁知道你是输入的是一个12，还是一个1，一个2，两个整数呢？
element ui el-input输入框自动失去焦点 elementui javascript
2022-05-14 11:53

回答 2 已采纳强制获取
要看就看最好，16万字全网最硬核redis总结，谁赞成，谁反对？（被粉丝疯狂催更，已有人反馈看完专栏拿到大厂offer！！！）
2021-10-10 21:30

李子捌的博客为了方便启动Redis和进入客户端，我们可以通过配置别名来实现 vim ~/.bashrc 添加如下配置，注意''很重要 redis与rcli后面的=两边不能有空格 alias redis='/usr/local/soft/redis-6.2.4/src/redis-server /usr/...
如何实现grid禁止选择特定行 javascript
2011-05-14 10:14

回答 5 已采纳 [code="js"]/*! * suziwen1@gmail.com * http://suziwen.com */ Ext.onReady(function(){
为什么用python 爬取数据到excel中300多行只剩下一行？ python vscode 开发语言有问必答
2021-08-01 12:32

回答 4 已采纳将写入文件语句放到循环外，加上列名并逐行写入，后面的代码可以这样写： #code with open('data/51job.csv','w') as f: f.write(','.join(
grid数据已取得，但是显示不出来，且没有报js错误？？！ javascript
2009-08-21 10:44

回答 2 已采纳 1.用firebug看ajax的response是否有返回json --如果没有,检查后台是否报错 2.在store的load事件里面检查store.getCount(),如果为0,说明是re
在zabbix 6.0上能使用zabbix_agent-2.4.4-hpux-11.31-amd64.tar监控hp-ux系统吗？运维
2023-03-01 18:14

回答 1 已采纳基于Monster 组和GPT的调写：根据Zabbix官方文档，Zabbix 6.0支持的zabbix agent最低版本为2.2，因此zabbix_agent-2.4.4版本应该是可以在Zabbix
element ui中怎么设置table每一行的固定高度，不被图片撑高 elementui javascript vue.js
2022-06-14 15:23

回答 6 已采纳控制图片高度
谁有Ext.ux.grid.ProgressColumn的实例 javascript
2011-08-04 11:33

回答 3 已采纳你是的extjs版本是什么？我去试试。
如何使用javascript和PHP导入数据Fuel UX datagrid javascript jquery php
2012-11-25 07:00

回答 1 已采纳 With php / mysql write to data.js, use sample/data.js as an example. (or rename your .php to data.
没有解决我的问题, 去提问

问题事件

关注

码龄粉丝数原力等级 --

被采纳

被点赞

采纳率
创建了问题 9月12日

悬赏问题

¥15 35114 SVAC视频验签的问题
¥15 impedancepy
¥15 在虚拟机环境下完成以下，要求截图！
¥15 求往届大挑得奖作品（ppt…）
¥15 如何在vue.config.js中读取到public文件夹下window.APP_CONFIG.API_BASE_URL的值
¥50 浦育平台scratch图形化编程
¥20 求这个的原理图只要原理图
¥15 vue2项目中，如何配置环境，可以在打完包之后修改请求的服务器地址
¥20 微信的店铺小程序如何修改背景图
¥15 UE5.1局部变量对蓝图不可见