Angularjs轻松实现表格按指定列排序

Imfan 发布于2019-08-19 17:42 / 2387人阅读

摘要：使用的过滤器，可以很容易的实现在表格中，点击某一列标题进行排序，实现过程如下代码当点击列标题时，执行事件，将排序条件反转，即，如果原来是升序则将按降序，降序亦如此代码默认按列排序默认排序条件升序让运行界面好看些，使用了样式库。

使用Angularjs的过滤器，可以很容易的实现在表格中，点击某一列标题进行排序，实现过程如下：

html代码：

js代码：

var app = angular.module("myapp", []);

app.controller("orderByCtrl", function($scope) {
    $scope.col = "name";//默认按name列排序
    $scope.desc = 0;//默认排序条件升序
    $scope.data = [{
        name: "name 1",
        gender: "male",
        age: 26,
        score: 70
    }, {
        name: "name 2",
        gender: "female",
        age: 24,
        score: 84
    }, {
        name: "name 3",
        gender: "male",
        age: 20,
        score: 76
    }, {
        name: "name 4",
        gender: "female",
        age: 22,
        score: 64
    }];


})

让运行界面好看些，使用了bootstrap.min.css样式库。为了交互性考虑，在表头增加了手指样式

th {
    cursor: pointer;
}

运行结果点击这里查看

海外云主机私有云 JS轻松实现CSS设置表格列 php 指定数组排序按类型排序

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/78775.html

用WijmoJS玩转您的Web应用 —— Angular6

摘要：除在全球率先支持外，现已全面应用于等主流框架中。本文中，我们将专注于如何将添加到用编写的应用程序中。使用创建应用程序。接下来，我们定义适用于这些元素中托管的应用程序面板元素和控件的规则。往期精彩用玩转您的应用为什么选择WijmoJS？作为一款纯前端控件集，WijmoJS秉承快如闪电，触控优先的设计理念，在提供优质服务和产品的同时，专注于企业应用开发，不断优化产品架构，与时俱进。除在...

hedge_hog 2019-08-22 17:59 评论0 收藏0
用WijmoJS玩转您的Web应用 —— Ionic

摘要：在之前的文章中，我们已经介绍了使用与三大框架结合搭建您的应用程序。使用创建应用程序。扩展阅读用玩转您的应用用玩转您的应用用玩转您的应用近期活动问卷调查扬帆万里，因您前行使用反馈意见征集前言：在本文中，我们将着重介绍如何将WijmoJS与Ionic一起使用，来创建一款移动端支持优先、快捷高效的应用程序。在之前的文章中，我们已经介绍了使用WijmoJS与Angular、React、Vu...

fjcgreat 2019-08-22 18:17 评论0 收藏0
用WijmoJS玩转您的Web应用 —— React

摘要：关于作为一款纯前端控件集，秉承快如闪电，触控优先的设计理念，在提供优质服务和产品的同时，专注于企业应用开发，不断优化产品架构，与时俱进。灵活的为用户提供易用轻松的操作体验，全面满足开发所需，是构建企业应用程序最完整的纯前端控件集。前文回顾在《用 WijmoJS 玩转您的Web应用》系列文章中，我们已经介绍了Angular和Vue框架下 WijmoJS 的玩法。而今天，我们将展示如...

FleyX 2019-08-22 18:09 评论0 收藏0
用WijmoJS玩转您的Web应用 —— Vue.js

摘要：相反，我们将专注于将添加到用编写的简单应用程序中。使用创建应用程序。示例应用程序有两个组件应用程序和。除在全球率先支持外，现已全面应用于等主流框架中。 showImg(https://segmentfault.com/img/bVbcvaQ?w=500&h=278); 概述在本文中，我们将展示如何将WijmoJS与NPM和Webpack一起使用来创建最流行的基于JavaScript应...

OnlyMyRailgun 2019-08-22 18:09 评论0 收藏0