通过dataSource调整kendoGrid中＜tr＞的位置

最新推荐文章于 2023-04-05 23:00:04 发布

lanying100

最新推荐文章于 2023-04-05 23:00:04 发布

阅读量280

点赞数

分类专栏：技术文章标签： js

本文链接：https://blog.csdn.net/lanying100/article/details/108667430

版权

技术专栏收录该内容

33 篇文章 2 订阅

订阅专栏

核心思路：

1.通过dataSource的data()方法拿到数组

2.通过对数组元素的增删调整位置（splice方法）

3.自测：data()方法需要在①fetch方法、②将数据源绑定到UI之后、③ setDataSource方法之后调用才能取到数据（三选一）

（官网上说还有read、query方法）

对data()方法返回值的描述：

The data items of the data source. Returns an empty array if the data source was not populated with data items via the read, fetch, or query methods.

代码参考：

<html>
<head>
    <title>学生列表</title>
    <!-- <link href="https://kendo.cdn.telerik.com/2016.2.504/styles/kendo.common.min.css" rel="stylesheet"/>
     <link href="https://kendo.cdn.telerik.com/2016.2.504/styles/kendo.default.min.css" rel="stylesheet"/>
     <script src="https://kendo.cdn.telerik.com/2016.2.504/js/jquery.min.js"></script>
     <script src="https://kendo.cdn.telerik.com/2016.2.504/js/kendo.all.min.js"></script>-->
    <link href="/css/kendo.common.min.css" rel="stylesheet"/>
    <link href="/css/kendo.default-v2.min.css" rel="stylesheet"/>
    <script src="/js/jquery.min.js"></script>
    <script src="/js/kendo.all.min.js"></script>
</head>
<body>
<!-- 学生表格，用来显示数据 -->
<div id="stuGrid"></div>

<script>
    $(function () {

        // 1.准备数据源
        var gridDataSource = new kendo.data.DataSource({
            data: [
                {"id": "1", "name": "Alice", "age": 18},
                {"id": "2", "name": "Bob", "age": 19},
                {"id": "3", "name": "Candy", "age": 20},
                {"id": "4", "name": "David", "age": 21}
            ]
        });

        // 2.将数据源配置到kendoGrid UI
        $("#stuGrid").kendoGrid({
            dataSource: gridDataSource, // 将数据源绑定到Kendo组件上
            selectable: "row", // 行选择模式
            columns: [{
                title: "<input type='checkbox'/>全选", // 外侧""，里面''
                template: "<input type='checkbox'/>",
                width: 45
            }, {
                field: "id", // 取的是数据源中id字段的值
                title: "学号",
                width: 160
            }, {
                field: "name",
                title: "姓名",
                width: 160
            }, {
                field: "age",
                title: "年龄",
                width: 200
            }]
        });

        // 3.获取数据源
        var stuData = gridDataSource.data(); // 在fetch方法、将数据源绑定到UI之后、setDataSource方法之后调用data()才能获取到数据
        console.log("stuData = ", stuData);

        /**
         * 4.调整位置
         * 模拟需求：把id为3和4的<tr>置顶
         */
        var count = 0; // 目标元素需要与哪一个位置(count)上的元素交换
        for (var i = 0; i < stuData.length; i++) {
            var stu = stuData[i];
            if (stu.id == 3 || stu.id == 4) {
                stuData.splice(i, 1); // 删除stu（从i位置开始，删除1条数据）
                stuData.splice(count++, 0, stu); // 插入stu（在count位置，删除0条，插入stu）
            }
        }

        /*
         * 5.说明
         * stuData与gridDataSource都是对象的引用，可以操作同一个数组。
         * 所以通过stuData增删的数组就是gridDataSource里的那个数组
         */
    });

</script>
</body>
</html>