摘要:非必設項篩選條件列表數組對象。格式在使用時該參數為必設項。前端雞湯前端框架前端相關篩選選中項,字符串默認為。非必設項,選中的過濾條件將會覆蓋否為多選布爾值默認為。刷新更新查詢條件其它更多請直接訪問查看當前版本
GridManager Angular 1.x
基于 Angular 1.x 的 GridManager 封裝, 用于便捷的在 Angular 中使用GridManager.
列表項目
實現功能寬度調整: 表格的列寬度可進行拖拽式調整
位置更換: 表格的列位置進行拖拽式調整
配置列: 可通過配置對列進行顯示隱藏轉換
表頭吸頂: 在表存在可視區域的情況下,表頭將一直存在于頂部
排序: 表格單項排序或組合排序
分頁: 表格ajax分頁,包含選擇每頁顯示總條數和跳轉至指定頁功能
用戶偏好記憶: 記住用戶行為,含用戶調整的列寬、列順序、列可視狀態及每頁顯示條數
序號: 自動生成序號列
全選: 自動生成全選列
導出: 當前頁數據下載,和僅針對已選中的表格下載
右鍵菜單: 常用功能在菜單中可進行快捷操作
過濾: 通過對列進行過濾達到快速搜索效果
API該文檔為原生GridManager的文檔,angular-1.x版本除了在columnData.text columnData.template topFullColumn.template中可以使用angular模版外,其它使用方式相同。
API
Demo該示例為原生GridManager的示例,angular-1.x版本除了在columnData.text columnData.template topFullColumn.template中可以使用angular模版外,其它使用方式相同。
簡單的示例
復雜的示例
Core codeGridManager
jTool
ENVES2015 + webpack + angular 1.x + GridManager
安裝npm install gridmanager-angular.1.x --save項目中引用
es2015引入方式
import gridManager from "gridmanager-angular-1.x";
通過script標簽引入
示例
function AppController($window, $rootScope, $scope, $element, $gridManager){ $scope.testClick = (row) => { console.log("click", row); }; // 常量: 搜索條件 $scope.TYPE_MAP = { "1": "HTML/CSS", "2": "nodeJS", "3": "javaScript", "4": "前端雞湯", "5": "PM Coffee", "6": "前端框架", "7": "前端相關" }; $scope.searchForm = { title: "", info: "" }; /** * 搜索事件 */ $scope.onSearch = () => { console.log("onSearch"); $gridManager.setQuery("testAngular", $scope.searchForm); }; $scope.onReset = () => { $scope.searchForm = { title: "", info: "" }; }; // 表格渲染回調函數 // query為gmOptions中配置的query $scope.callback = function(query) { console.log("callback => ", query); }; $scope.option = { gridManagerName: "testAngular", width: "100%", height: "100%", supportAjaxPage:true, isCombSorting: true, disableCache: false, ajax_data: function () { return "https://www.lovejavascript.com/blogManager/getBlogList"; }, ajax_type: "POST", columnData: [ { key: "pic", remind: "the pic", width: "110px", align: "center", text: "縮略圖", // ng template template: ` ` },{ key: "title", remind: "the title", align: "left", text: "標題", sorting: "", // 使用函數返回 ng template template: function() { return "{{row.title}}"; } },{ key: "type", remind: "the type", text: "博文分類", align: "center", width: "150px", sorting: "", // 表頭篩選條件, 該值由用戶操作后會將選中的值以{key: value}的形式覆蓋至query參數內。非必設項 filter: { // 篩選條件列表, 數組對象。格式: [{value: "1", text: "HTML/CSS"}],在使用filter時該參數為必設項。 option: [ {value: "1", text: "HTML/CSS"}, {value: "2", text: "nodeJS"}, {value: "3", text: "javaScript"}, {value: "4", text: "前端雞湯"}, {value: "5", text: "PM Coffee"}, {value: "6", text: "前端框架"}, {value: "7", text: "前端相關"} ], // 篩選選中項,字符串, 默認為""。 非必設項,選中的過濾條件將會覆蓋query selected: "3", // 否為多選, 布爾值, 默認為false。非必設項 isMultiple: true }, // isShow: false, template: `` },{ key: "info", remind: "the info", width: "300px", text: "簡介" },{ key: "username", remind: "the username", align: "center", width: "100px", text: "作者", // 使用函數返回 dom string template: `{{row.username}}` },{ key: "createDate", width: "130px", text: "創建時間", sorting: "DESC", // 使用函數返回 htmlString template: function(createDate, rowObject){ return new Date(createDate).toLocaleDateString(); } },{ key: "lastDate", width: "130px", text: "最后修改時間", sorting: "", // 使用函數返回 htmlString template: function(lastDate, rowObject){ return new Date(lastDate).toLocaleDateString(); } },{ key: "action", remind: "the action", width: "100px", align: "center", text: "操作", // 直接返回 htmlString template: "刪除" } ] }; /** * 模擬刪除 * @param row * @param index */ $scope.delectRowData = function(row, index) { if(window.confirm(`確認要刪除當前頁第[${index}]條的["${row.title}]?`)){ console.log("----刪除操作開始----"); $gridManager.refreshGrid("testAngular"); // $element[0].querySelector("table[grid-manager="testAngular"]").GM("refreshGrid"); console.log("數據沒變是正常的, 因為這只是個示例,并不會真實刪除數據."); console.log("----刪除操作完成----"); } }; } AppController.inject = ["$window", "$rootScope", "$scope", "$element", "$gridManager"]; angular .module("myApp", ["gridManager"]) .controller("AppController", AppController);調用公開方法
以下方法需要在已經存在gridManager實例的Angular環境下使用。
// 刷新 $gridManager.refreshGrid("testAngular"); // 更新查詢條件 $gridManager.setQuery("testAngular", {name: "baukh"}); // ...其它更多請直接訪問[API](http://gridmanager.lovejavascript.com/api/index.html)查看當前版本
import gridManager from "gridmanager-angular-1.x"; console.log("GridManager", angular.module("gridManager").version);
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/103265.html
摘要:歷程啟動于年月日不曾想這一堅持已經多天了。每個午飯后晚飯前。期間對的認知與實踐提升明顯,并沉淀下名為的類庫。每次發布前的,成為一種風險把控。在此之前從沒有如此的認同單元測試,也相信這終將會成為一種大家都遵守的契約。 GridManager歷程 GridManager 啟動于2015年02月10日, 不曾想這一堅持已經1200多天了。總想為此記錄些什么,但一直未曾動手。午飯后,公司很安靜...
摘要:基于的封裝用于便捷的在中使用除過特性外,其它與相同。刷新更新查詢條件其它更多請直接訪問查看當前版本的版本的版本 GridManager React 基于 React 的 GridManager 封裝, 用于便捷的在 React 中使用GridManager. 除過React特性外,其它API與GridManager API相同。 showImg(https://segmentfault...
摘要:基于的封裝用于便捷的在中使用除過特性外,其它與相同。非必設項篩選條件列表數組對象。格式在使用時該參數為必設項。并且使用服務需要提前通過將注冊至全局組件。刷新或更新查詢條件或其它更多請直接訪問查看當前版本 GridManager Vue 基于 Vue 的 GridManager 封裝, 用于便捷的在 Vue 中使用GridManager. 除過Vue特性外,其它API與GridManag...
摘要:優勢純原生實現,不依賴任何框架使用簡單快捷,功能強大與用戶進行溝通,采納來自于使用的需求,并不間段的進行升級維護特色功能表格的列寬度可進行拖拽式調整表格的列位置進行拖拽式調整可通過配置對列進行顯示隱藏轉換在表存在可視區域的情況下表頭將一直存 GridManager showImg(https://segmentfault.com/img/bV4Mff?w=1146&h=538); 優勢...
閱讀 1329·2021-09-04 16:40
閱讀 3455·2021-07-28 00:13
閱讀 2878·2019-08-30 11:19
閱讀 2611·2019-08-29 12:29
閱讀 3167·2019-08-29 12:24
閱讀 1122·2019-08-26 13:28
閱讀 2386·2019-08-26 12:01
閱讀 3445·2019-08-26 11:35