Customize the background sort Dojo

2011-01-06  来源:本站原创  分类:Web  人气:188 

Dojo itself provides a sort function, but this sort is not back-order, if the page has paging, sorting only the current page, page will be lost after the sorting.
This provides a sort method to achieve the background, idea is to rewrite the headers click the trigger event, the field will be passed to the sort of background.

<div dojoType="dojox.grid.DataGrid" store="initStore" onHeaderCellClick="myGridSort" structure="layout" escapeHTMLInData="false" noDataMessage="noData" autoHeight="true"> </ div>

Red label is the time when you click the header of the method we are to achieve the following code:

function myGridSort (e) {
columnSort = e.cellIndex;
if (oldColumnSort & & columnSort! = oldColumnSort) {
systemlogsortAscending = false;
}
var data = e.rowIndex;
if (columnSort! = -1) {
var propSort = layout [e.cellIndex]. name; / /
var sortby = layout [e.cellIndex]. id; / /
if (sortby) {
var cells_length = layout.length; / /
if (true) {/ /
systemlogsortAscending =! systemlogsortAscending; / /
var order = 'DESC';
if (systemlogsortAscending) {
order = 'ASC';
}
/ / Because with the page, so take some of the data saved to the hidden field
dojo.byId ("sortby"). value = sortby;
dojo.byId ("order"). value = order;
dojo.byId ("cells_length"). value = cells_length;
dojo.byId ("columnSort"). value = columnSort;
dojo.byId ("propSort"). value = propSort;
dojo.byId ("sortAscending"). value = systemlogsortAscending;
var form = document.getElementById ("$ {param.formId}");
var url = form.action + "? sortby =" + sortby + "& order =" + order;
oldColumnSort = columnSort;
loadGridDataAJAX ("$ {param.formId}", "$ {param.gridId}", url, cells_length, columnSort, propSort, systemlogsortAscending);
}
}
}

}

loadGridDataAJAX code:

function loadGridDataAJAX (formID, gridID, actionUrl, cells_length, columnSort, propSort, sortAscending) {
showProgressBar ();
dojo.xhrPost ({
url: actionUrl,
handleAs: "json",
form: formID,
load: function (resp, ioArgs) {
response = resp.data;

document.forms [gridID + "PageInfoForm"] ["paging.current"]. value = "";

if (typeof (resp) == "string") {
hideProgressBar ();
return false;
}
try {
dojo.byId (gridID + "currentPageNum"). value = "";
var toPageRefreshObject = dijit.byId (gridID);
var gridItems = {items: resp.data};
toPageRefreshObject.setStore (new dojo.data.ItemFileReadStore ({data: gridItems}));
dojo.byId (gridID + "totalRecord"). innerHTML = resp.paging.totalRecord;
dojo.byId (gridID + "size"). innerHTML = resp.paging.size;
dojo.byId (gridID + "currentPageNum"). innerHTML = resp.paging.current;
dojo.byId (gridID + "totalPageNum"). innerHTML = resp.paging.total;
document.forms [gridID + "PageInfoForm"] ["paging.size"]. value = resp.paging.size;
document.forms [gridID + "PageInfoForm"] ["paging.queryCondition"]. value = resp.paging.queryCondition;
updateHeaderView (gridID, cells_length, columnSort, propSort, sortAscending);
hideProgressBar ();
} Catch (e) {
hideProgressBar ();
}
return resp;
}
error: function (resp, sss) {
hideProgressBar ();
}
});
}

Finally, the code page in the list:

dojo.require ("dojox.grid.DataGrid");
dojo.require ("dojo.parser");

var gridList = {identifier: 'batch_ID', items: $ {dojoGridVO.jsonData}};
var initStore = new dojo.data.ItemFileReadStore ({data: gridList});
var layout = [
{Name: '<input type="checkbox" name="all">', width: 6, get: getSelect},
{Id: 'batchName', name: '<fmt:message key="batch.batchName" />', width: 15, field: "batchName"},
{Id: 'batchExt', name: '<fmt:message key="batch.suffix" />', width: 6, field: "batchExt"},
{Id: 'checked', name: '<fmt:message key="batch.checkStatus" />', width: 8, field: "checked"},
{Id: 'posted', name: '<fmt:message key="batch.postStatus" />', width: 8, field: "posted"},
{Name: '<fmt:message key="batch.select" />', width: 10, get: selectLink},
{Name: '<fmt:message key="batch.process" />', width: 'auto', get: processColumn}
];

Want to sort on which fields are defined in the layout, to sort the columns you want to add the id: 'batchName' property, where batchName sort field to spread the name of the background, this usually corresponds with the PO field inside. If you do not need to sort this out, do not add the id attribute.

相关文章
  • Customize the background sort Dojo 2011-01-06

    Dojo itself provides a sort function, but this sort is not back-order, if the page has paging, sorting only the current page, page will be lost after the sorting. This provides a sort method to achieve the background, idea is to rewrite the headers c

  • Customize the background color of listview when clicking 2011-01-12

    Customize the background color of listview when clicking http://www.eoeandroid.com/forum-viewthread-tid-46537-fromuid-5189.html http://wang-peng1.javaeye.com/blog/568993

  • Customize the background is similar to listView in Item 2010-09-27

    Method I. drawable / listitem_bk.xml <?xml version="1.0" encoding="utf-8" ?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <!-- No focus background pictures --> <item android:state

  • Customize the background of similar listView in Item 2010-09-27

    drawable / listitem_bk.xml xmlns:android="http://schemas.android.com/apk/res/android"> <item android:state_window_focused="false" android:drawable="@drawable/pic_name" /> <item android:state_focused="true&quo

  • (R) TabBar / NavBar / Toolbar to customize the background 2011-01-12

    Method One @implementation UINavigationBar (UINavigationBarCategory) - (void)drawRect:(CGRect)rect { // Join the rotating coordinate system code // Drawing code UIImage *navBarImage = [UIImage imageNamed:@"navibar.png"]; CGContextRef context = U

  • Fundamentals of Dojo (5) 2010-04-02

    1. Dojo Xiangjie 1.1. General function 1.1.1. Dojo.require In the previous example, the fact that we have seen dojo.require use. It is used to declare the dojo will use the component type. Similar to Java in the import statement. Dojo is the code int

  • mootools,jquery,dojo 2015-01-20

    最近,我开始关注Dojo了,Dojo是一个强大的面向对象JavaScript框架,既然我那么喜欢MooTools,也没理由不喜欢Dojo.与Dojo相比我对MooTools 和 jQuery 是比较熟的.这并不重要,不管使用什么样的语言,我们完成的任务是相同的,本质上的区别是使用的语法不同罢了. 接下来,我就来看一些不同JavaScript框架,如何使用一些基本的语法,来完成共同任务. Execute Code when the DOM is Ready / window.load注册事件的替代

  • Java collections of the Set () 2010-03-29

    Java collections in the collection is stored in an object reference, rather than the object itself, for the convenience of expressing, referred to as "a collection of objects." Set (set): the objects in the collection are not arranged according

  • xml attribute collection 2010-04-24

    android: background = "@ drawable / logo" ---- can customize the background image for the TextView, etc.

  • 10 Web Application Interface Technology 2010-05-10

    Today more and more applications migrate to web platform. Since there is no platform restrictions and installation requirements, SAAS model looks very attractive. Web application interface design, the core is the web design, but its focus is mainly i

  • Around the world, mainstream, mainstream search engines and non-functional search engine list (change) 2010-06-09

    Reference search engine, it is estimated most people would jump out of reflex Google, Yahoo, Baidu ... ... In fact, there are many around the world, the Internet search engine, slightly compiled a list, Thumbnail page snapshot can not seem to be caug

  • (Original) WordPress 3.0 final version has been released 2010-06-18

    WordPress 3.0, WordPress contributors by the time-consuming and a half years of cordial to 218 days. . In this version of the major new features include a new default theme of the 2010 so-called sexy. Theme developers have a new API, so that they can

  • His summary of the ExtJs 2010-08-11

    ExtJs Summary keyword: extjs --- grid Question: When using the Grid, the column headers and check if there is dislocation Use custom style . Ext-ie7. X-menu-item-icon, . Ext-ie6. X-menu-item-icon (left:-24px;) . Ext-ie8. X-menu-item-icon, . Ext-ie7.

  • Personalized (Style / Theme) The ListView 2010-10-15

    1) Item divider Only in the Adapter in the Override isEnabled Method, in getView other related can be set. public class XXXItemAdapter extends BaseAdapter{ private LayoutInflater minflater; private List<CommonViewHolder> list; public FinanceListItem

  • How to achieve without plug-ins to WordPress code highlighting (plus color) 2010-12-15

    Station for a technology blog, where the code to show a lot. To beautify the code display, highlighting the WordPress code is the best way. Currently the network has highlighted many WordPress plugin code, but very bloated. For example, code highligh

  • Magento in the mechanism of expansion is not perfect Review 2011-04-20

    Magento default comments are "title" and "content" of two fields. If I want to add my system "advantages" "disadvantages" and other columns, then how to do it? Review by analyzing the correlation table and found tha

  • Magento China shipping table settings 2011-04-20

    Transfer from: http://www.earthplayer.com/bbs/viewthread.php?tid=478 Which in addition to the fixed shipping in Magento, and the other is the table for simple configuration settings for freight (table rate) Speaking of attention at the time the area

  • The best way to convert and burn videos to dvd 2011-03-01

    Hello, do you want to make a nice dvd from your movies or videos? and the made dvd just looks like the real dvd which in the store. If you want to do that well, you need to use a right software to help you. Maybe some people will use the free softwar

  • JavaScript html js Table Sort 2009-05-04

    Process of implementation at the client are on the table to sort, has the following characteristics: 1. Custom sort out, sorting attributes (such as innerHTML), sort data types (including int, float, date, string), sort order (the order and reverse o

  • Yii CGridView explain (sort key field to see some of the associated table) 2011-05-23

    Yii CGridView explain (sort key field to see some of the associated table) / / CGridView Detailed useful this stuff in the background, can accelerate the speed of development, worth a visit CGridView display with data entry form each row represents a