Angularjs輕松實(shí)現(xiàn)表格按指定列排序

Imfan 發(fā)布于2019-08-19 17:42 / 2568人閱讀

摘要：使用的過(guò)濾器，可以很容易的實(shí)現(xiàn)在表格中，點(diǎn)擊某一列標(biāo)題進(jìn)行排序，實(shí)現(xiàn)過(guò)程如下代碼當(dāng)點(diǎn)擊列標(biāo)題時(shí)，執(zhí)行事件，將排序條件反轉(zhuǎn)，即，如果原來(lái)是升序則將按降序，降序亦如此代碼默認(rèn)按列排序默認(rèn)排序條件升序讓運(yùn)行界面好看些，使用了樣式庫(kù)。

使用Angularjs的過(guò)濾器，可以很容易的實(shí)現(xiàn)在表格中，點(diǎn)擊某一列標(biāo)題進(jìn)行排序，實(shí)現(xiàn)過(guò)程如下：

html代碼：

js代碼：

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

app.controller("orderByCtrl", function($scope) {
    $scope.col = "name";//默認(rèn)按name列排序
    $scope.desc = 0;//默認(rèn)排序條件升序
    $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
    }];


})

讓運(yùn)行界面好看些，使用了bootstrap.min.css樣式庫(kù)。為了交互性考慮，在表頭增加了手指樣式

th {
    cursor: pointer;
}

運(yùn)行結(jié)果點(diǎn)擊這里查看

云服務(wù)器 GPU云服務(wù)器 JS輕松實(shí)現(xiàn)CSS設(shè)置表格列 php 指定數(shù)組排序按類(lèi)型排序

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/78775.html

相關(guān)文章

用WijmoJS玩轉(zhuǎn)您的Web應(yīng)用 —— Angular6

摘要：除在全球率先支持外，現(xiàn)已全面應(yīng)用于等主流框架中。本文中，我們將專(zhuān)注于如何將添加到用編寫(xiě)的應(yīng)用程序中。使用創(chuàng)建應(yīng)用程序。接下來(lái)，我們定義適用于這些元素中托管的應(yīng)用程序面板元素和控件的規(guī)則。往期精彩用玩轉(zhuǎn)您的應(yīng)用為什么選擇WijmoJS？作為一款純前端控件集，WijmoJS秉承快如閃電，觸控優(yōu)先的設(shè)計(jì)理念，在提供優(yōu)質(zhì)服務(wù)和產(chǎn)品的同時(shí)，專(zhuān)注于企業(yè)應(yīng)用開(kāi)發(fā)，不斷優(yōu)化產(chǎn)品架構(gòu)，與時(shí)俱進(jìn)。除在...

hedge_hog 2019-08-22 17:59 評(píng)論0 收藏0
用WijmoJS玩轉(zhuǎn)您的Web應(yīng)用 —— Ionic

摘要：在之前的文章中，我們已經(jīng)介紹了使用與三大框架結(jié)合搭建您的應(yīng)用程序。使用創(chuàng)建應(yīng)用程序。擴(kuò)展閱讀用玩轉(zhuǎn)您的應(yīng)用用玩轉(zhuǎn)您的應(yīng)用用玩轉(zhuǎn)您的應(yīng)用近期活動(dòng)問(wèn)卷調(diào)查揚(yáng)帆萬(wàn)里，因您前行使用反饋意見(jiàn)征集前言：在本文中，我們將著重介紹如何將WijmoJS與Ionic一起使用，來(lái)創(chuàng)建一款移動(dòng)端支持優(yōu)先、快捷高效的應(yīng)用程序。在之前的文章中，我們已經(jīng)介紹了使用WijmoJS與Angular、React、Vu...

fjcgreat 2019-08-22 18:17 評(píng)論0 收藏0
用WijmoJS玩轉(zhuǎn)您的Web應(yīng)用 —— React

摘要：關(guān)于作為一款純前端控件集，秉承快如閃電，觸控優(yōu)先的設(shè)計(jì)理念，在提供優(yōu)質(zhì)服務(wù)和產(chǎn)品的同時(shí)，專(zhuān)注于企業(yè)應(yīng)用開(kāi)發(fā)，不斷優(yōu)化產(chǎn)品架構(gòu)，與時(shí)俱進(jìn)。靈活的為用戶(hù)提供易用輕松的操作體驗(yàn)，全面滿足開(kāi)發(fā)所需，是構(gòu)建企業(yè)應(yīng)用程序最完整的純前端控件集。前文回顧在《用 WijmoJS 玩轉(zhuǎn)您的Web應(yīng)用》系列文章中，我們已經(jīng)介紹了Angular和Vue框架下 WijmoJS 的玩法。而今天，我們將展示如...

FleyX 2019-08-22 18:09 評(píng)論0 收藏0
用WijmoJS玩轉(zhuǎn)您的Web應(yīng)用 —— Vue.js

摘要：相反，我們將專(zhuān)注于將添加到用編寫(xiě)的簡(jiǎn)單應(yīng)用程序中。使用創(chuàng)建應(yīng)用程序。示例應(yīng)用程序有兩個(gè)組件應(yīng)用程序和。除在全球率先支持外，現(xiàn)已全面應(yīng)用于等主流框架中。 showImg(https://segmentfault.com/img/bVbcvaQ?w=500&h=278); 概述在本文中，我們將展示如何將WijmoJS與NPM和Webpack一起使用來(lái)創(chuàng)建最流行的基于JavaScript應(yīng)...

OnlyMyRailgun 2019-08-22 18:09 評(píng)論0 收藏0