//*********************************************************************************** // Copyright Dirisoft Bilgi ve Iletisim Tek. Ltd. 2010, Ankara, Turkey // All rights are reserved. Reproduction or transmission in whole or in part, in // any form or by any means, electronic, mechanical or otherwise, is prohibited // without the prior written consent of Dirisoft Bilgi ve Iletişim Tek. Ltd. Şti. // // Ankara Teknoloji Geliştirme Bölgesi, Cyberpark Tepe Binası Z41 // 06800 - Bilkent, Çankaya, Ankara-Turkey // info@dirisoft.com – www.dirisoft.com // // Filename: // Author Name : Yusuf Aytaş //*********************************************************************************** //*********************************************************************************** // Grid examples //---------------------------------------------------------------------------------- // Example #1 : In default version of grid you do give action url that will make ajax // requests from server. You can define all localizations and themes by // giving them their value. You can also add item to grid or delete item // from grid or update item by the help of addGridItem method, // deleteGridItem and finally updateGridItem //---------------------------------------------------------------------------------- // // // // // // // //

Grid Deneme

// // //---------------------------------------------------------------------------------- // Example #2 : In this example, we get data from an outside source which will be // provided by the developer. Instead of using server generated source, // we have used javascript random function to generate the source for // the grid. You can get your own data from server by using grid // UpdateGrid method which will handle all update operation by user. // In order to get data from outside source, you must give grid an initial // data and if you want to update grid from outside source you must write // a trigger method which will handle outside events. //---------------------------------------------------------------------------------- // // // // // // // //

Grid Deneme

// // //---------------------------------------------------------------------------------- function Grid(settings, theme, localization) { this.GridLocalization = { nextButtonName: "Next", previousButtonName: "Previous", firstButtonName: "First", lastButtonName: "Last", nextGroupButtonName: "Next Group", previousGroupButtonName: "Previous Group" }; this.GridTheme = { nextButtonClass: "gridButton", previousButtonClass: "gridButton", firstButtonClass: "gridButton", lastButtonClass: "gridButton", nextGroupButtonClass: "gridButton", previousGroupButtonClass: "gridButton", pageNumberClass: "pageNumber", currentPageNumberClass: "currentPageNumber" }; this.GridSettings = { firstLastButton: true, //boolean that makes first and last button appear nextPrevGroupButton: true, //boolean that makes next and prev group button appear isTriggered : false, //If isTriggered calls the trigger function actionUrl: "", gridID: "", //element id which will be our grid gridNumberID: "", //element id which will be our pageID numberSpacing: " ", //element that is for spacing between the numbers noOfItems: 13, totalPages: 10, itemsPerPage: 5, currentPageNo: 0, maxPages: 5, //maximum page number that can appear on the screen begin: 0, //page begin number end: 5, //page end number initialData: null, //if initial data is set than grid updates itself from outside source currentPage: null, Function: null, //Function that draws the content of each element in the list Trigger: null, //trigger function which is triggered when a page event is raised AnimationStart: null, //function that starts the animation AnimationStop: null //function that stops the animation }; this.GridLocalization = $.extend(this.GridLocalization,localization); this.GridTheme = $.extend(this.GridTheme, theme); this.GridSettings = $.extend(this.GridSettings, settings); this.InitializeGrid = InitializeGrid; this.InitalizeGridPageNumbers = InitalizeGridPageNumbers; this.UpdateGridPageNumbers = UpdateGridPageNumbers; this.SetGridPageNumbers = SetGridPageNumbers; this.GetGridPage = GetGridPage; this.GetNextGridPage = GetNextGridPage; this.GetPreviousGridPage = GetPreviousGridPage; this.GetFirstGridPage = GetFirstGridPage; this.GetLastGridPage = GetLastGridPage; this.GetNextGroupGridPage = GetNextGroupGridPage; this.GetPreviousGroupGridPage = GetPreviousGroupGridPage; this.SetGridItems = SetGridItems; InitializeGrid(this); } function InitializeGrid(grid) { if (grid.GridSettings.maxPages < 3) grid.GridSettings.maxPages = 3; grid.GridSettings.totalPages = grid.GridSettings.noOfItems / grid.GridSettings.itemsPerPage | 0; if (grid.GridSettings.noOfItems % grid.GridSettings.itemsPerPage != 0) grid.GridSettings.totalPages++; grid.InitalizeGridPageNumbers(grid); if (grid.GridSettings.initialData != null) { $.each(grid.GridSettings.initialData, function (index, item) { $(grid.GridSettings.gridID).append(grid.GridSettings.Function(item)); }); grid.GridSettings.initialData = null; } else { if (grid.GridSettings.isTriggered) grid.GridSettings.Trigger(grid.GridSettings.currentPageNo); else grid.SetGridItems(grid); } } function InitalizeGridPageNumbers(grid) { if (grid.GridSettings.totalPages < grid.GridSettings.maxPages) grid.GridSettings.end = grid.GridSettings.totalPages; UpdateGridPageNumbers(grid, grid.GridSettings.currentPageNo); SetGridPageNumbers(grid); } function UpdateGridPageNumbers(grid,pageNumber) { if (grid.GridSettings.totalPages > grid.GridSettings.maxPages) { var minus = pageNumber - (((grid.GridSettings.begin + grid.GridSettings.end) / 2) | 0); if (grid.GridSettings.end + minus <= grid.GridSettings.totalPages) grid.GridSettings.end += minus; else grid.GridSettings.end = grid.GridSettings.totalPages; if (pageNumber < grid.GridSettings.maxPages && grid.GridSettings.end < grid.GridSettings.maxPages) { grid.GridSettings.end = grid.GridSettings.maxPages; grid.GridSettings.begin = 0; } grid.GridSettings.begin = grid.GridSettings.end - grid.GridSettings.maxPages; } else { grid.GridSettings.end = grid.GridSettings.totalPages; grid.GridSettings.begin = 0; } grid.GridSettings.currentPageNo = pageNumber; SetGridPageNumbers(grid); } function SetGridPageNumbers(grid) { $(grid.GridSettings.gridNumberID).html(""); var firstButton = $("" + grid.GridLocalization.firstButtonName + " ").click(function () { grid.GetFirstGridPage(grid); }); var previousButton = $("" + grid.GridLocalization.previousButtonName + " ").click(function () { grid.GetPreviousGridPage(grid); }); var previousGroupButton = $("" + grid.GridLocalization.previousGroupButtonName + " ").click(function () { grid.GetPreviousGroupGridPage(grid); }); if (grid.GridSettings.firstLastButton) { $(grid.GridSettings.gridNumberID).append(firstButton); $(grid.GridSettings.gridNumberID).append(grid.GridSettings.numberSpacing); } if (grid.GridSettings.nextPrevGroupButton) { $(grid.GridSettings.gridNumberID).append(previousGroupButton); $(grid.GridSettings.gridNumberID).append(grid.GridSettings.numberSpacing); } $(grid.GridSettings.gridNumberID).append(previousButton); $(grid.GridSettings.gridNumberID).append(grid.GridSettings.numberSpacing); for (var i = grid.GridSettings.begin; i < grid.GridSettings.end; i++) { var item = $("" + (i + 1) + "").click(function () { grid.GetGridPage(grid,$(this).html()); }); if (i == grid.GridSettings.currentPageNo) { grid.GridSettings.currentPage = item; $(item).addClass(grid.GridTheme.currentPageNumberClass); } else $(item).addClass(grid.GridTheme.pageNumberClass); $(grid.GridSettings.gridNumberID).append(item); $(grid.GridSettings.gridNumberID).append(grid.GridSettings.numberSpacing); } var nextGroupButton = $("" + grid.GridLocalization.nextGroupButtonName + " ").click(function () { grid.GetNextGroupGridPage(grid); }); var nextButton = $("" + grid.GridLocalization.nextButtonName + " ").click(function () { grid.GetNextGridPage(grid); }); var lastButton = $("" + grid.GridLocalization.lastButtonName + " ").click(function () { grid.GetLastGridPage(grid); }); $(grid.GridSettings.gridNumberID).append(nextButton); if (grid.GridSettings.nextPrevGroupButton) { $(grid.GridSettings.gridNumberID).append(grid.GridSettings.numberSpacing); $(grid.GridSettings.gridNumberID).append(nextGroupButton); } if (grid.GridSettings.firstLastButton) { $(grid.GridSettings.gridNumberID).append(grid.GridSettings.numberSpacing); $(grid.GridSettings.gridNumberID).append(lastButton); } } function GetGridPage(grid, pageNumber) { $(grid.GridSettings.currentPage).addClass(grid.GridTheme.pageNumberClass); grid.UpdateGridPageNumbers(grid, pageNumber - 1); if (grid.GridSettings.AnimationStart != null) grid.GridSettings.AnimationStart(); if (grid.GridSettings.isTriggered) { grid.GridSettings.Trigger(grid.GridSettings.currentPageNo); } else grid.SetGridItems(grid); } function GetNextGridPage(grid) { if (grid.GridSettings.currentPageNo < grid.GridSettings.totalPages - 1) grid.GetGridPage(grid,grid.GridSettings.currentPageNo + 2); } function GetPreviousGridPage(grid) { if (grid.GridSettings.currentPageNo > 0) grid.GetGridPage(grid, grid.GridSettings.currentPageNo); } function GetFirstGridPage(grid) { grid.GetGridPage(grid, 1); } function GetLastGridPage(grid) { grid.GetGridPage(grid, grid.GridSettings.totalPages); } function GetNextGroupGridPage(grid) { if (grid.GridSettings.end + ((grid.GridSettings.maxPages/2)|0)+1 < grid.GridSettings.totalPages - 1) grid.GetGridPage(grid, grid.GridSettings.end + ((grid.GridSettings.maxPages / 2) | 0)+1); else grid.GetLastGridPage(grid); } function GetPreviousGroupGridPage(grid) { if (grid.GridSettings.begin - ((grid.GridSettings.maxPages / 2) | 0) > 0) grid.GetGridPage(grid, grid.GridSettings.begin - ((grid.GridSettings.maxPages / 2) | 0)); else grid.GetFirstGridPage(grid); } function SetGridItems(grid) { $(grid.GridSettings.gridID).html(""); $.getJSON(grid.GridSettings.actionUrl, { pageNumber: grid.GridSettings.currentPageNo }, function (data) { $.each(data, function (index, item) { $(grid.GridSettings.gridID).append(grid.GridSettings.Function(item)); }); if (grid.GridSettings.AnimationStop != null) grid.GridSettings.AnimationStop(); }); } Grid.prototype = { SetGridTheme: function (theme) {//sets the grid theme options this.GridTheme = $.extend(this.GridTheme, theme); }, SetGridLocalization: function (localization) {//sets the grid localization options this.GridLocalization = $.extend(this.GridLocalization, localization); }, SetGridSettings: function (settings) {//sets the grid settings options this.GridSettings = $.extend(this.Settings, settings); }, //Adds a grid item if func is not null, it calls func method with the data which is returned by //the ajax call. if you want to use this function, you should return true, when your data operation //is successfull and return false when data operation is not succesfull AddGridItem: function (actionMethod, json, func) { var grid = this; $.post(actionMethod, json, function (data) { var result; if (func != null) result = func(data); if (result != null && result) { grid.GridSettings.noOfItems = (grid.GridSettings.noOfItems | 0) + 1; grid.InitializeGrid(grid); } }); }, DeleteGridItem: function (actionMethod, json, func) { var grid = this; $.post(actionMethod, json, function (data) { var result; if (func != null) result = func(data); if (result != null && result) { grid.GridSettings.noOfItems = (grid.GridSettings.noOfItems | 0) - 1; if (grid.GridSettings.noOfItems % grid.GridSettings.itemsPerPage == 0 && grid.GridSettings.currentPageNo != 0) { grid.GridSettings.currentPageNo = (grid.GridSettings.currentPageNo | 0) - 1; grid.GridSettings.begin = (grid.GridSettings.begin | 0) - 1; grid.GridSettings.end = (grid.GridSettings.begin | 0) - 1; } grid.InitializeGrid(grid); } }); }, UpdateGridItem: function (actionMethod, json, func) { var grid = this; $.post(actionMethod, json, function (data) { var result; if (func != null) result = func(data); if (result != null && result) { grid.InitializeGrid(grid); } }); }, //updates the grid authomatically when a data is given //if an event raised by trigger user do not have to specify noOfItems or pageNo //in this case, pageNo and noOfItems should be null //otherwise it will calculate pageNumbers again for given pageNumber and pageNo UpdateGrid: function (data, noOfItems, pageNo) { var grid = this; if (pageNo != null || pageNo != "") { grid.GridSettings.noOfItems = noOfItems; if (grid.GridSettings.maxPages < 3) grid.GridSettings.maxPages = 3; grid.GridSettings.totalPages = grid.GridSettings.noOfItems / grid.GridSettings.itemsPerPage | 0; if (grid.GridSettings.noOfItems % grid.GridSettings.itemsPerPage != 0) grid.GridSettings.totalPages++; grid.UpdateGridPageNumbers(grid, pageNo); } $(grid.GridSettings.gridID).html(""); $.each(data, function (index, item) { $(grid.GridSettings.gridID).append(grid.GridSettings.Function(item)); }); }, //Refreshes the grid Refresh: function () { var grid = this; grid.InitializeGrid(this); } };