Flexigrid use Select all, Auto bind

1. Introduction

Flexigrid is a grid similar to Ext gird, but based on the jquery development. Features include: You can adjust column widths, merge column headings, pagination, sort, show/hide tables, and more. The data displayed by Flexigrid can be obtained via Ajax or converted from a common table.

2. Related parameters

　　　　

height:200, the height of the//flexigrid plug-in, in Pxwidth: ' Auto ',//Width value, auto is calculated automatically based on the width of each column, it is recommended to set the specific value under IE6 otherwise there will be a problem striped:true,// Whether the stripe effect is displayed, the default is the form of odd and even interactions novstripe:false,//has not used this property minwidth:30,//column minimum width minheight:80,//column minimum height resizable:false,// Resizable table is scalable Url:false,//ajax Url,ajax method corresponding to the URL address method: ' POST ',//data sending method, the mode of transmission datatype: ' JSON ',/ /type of data loaded, type xml,jsonerrormsg: ' Error occurred ',//error boost information Usepager:false,//whether pagination nowrap:true,//Whether the line is not wrapped page:1,//cur Rent page, default current page total:1,//total pages, total number of pages userp:true,//use the results per page select box, whether you can dynamically set the number of results displayed per page rp:25,//R Esults per page, default number of results rpoptions: [10, 15, 20, 25, 40, 100],//The number of results per page that can be set Title:false,//contains the title Pagestat: ' Show record from {to} to {T o}, totals {total} bar ',//displays the style of the current page and the total page procmsg: ' Processing data, please wait ... ',//the prompt that is being processed query: ',//Search query Conditions Qtype: ',//Search query category Qop: "Eq",/ /Search operator Nomsg: ' There is no qualifying record present ',//No result hint message mincoltoggle:1,//////allow display of the minimum number of columns showtogglebtn:true,//whether to allow the display of hidden columns, This property has a bug set to False click on the header of this report. Hideonsubmit:true,//whether to show cloaking at callback ShowtabletogglebtN:false,//whether to display the "Show hidden Grid" button autoload:true,//auto-load, that is, the first time to initiate an AJAX request blockopacity:0.5,//Transparency settings ontogglecol:false,// When converting between rows, you can override the default implementation in this method, basically useless onchangesort:false,//When you change the sort, you can override the default implementation in this method, implement the client-side sort Onsuccess:false,//execute onsubmit after success:         False,//call a custom calculation function, basically useless

3. Plugin Source code

Http://files.cnblogs.com/files/youngerliu/Flexigrid.rar, this version has made a few minor changes, adding a checkbox support, select All, anti-select easy to fix.

The main increase is 930-936 lines of flexigrid.js.

1  //Add by2                     if(cm.thtype) {3                         if(Cm.thtype = = "checkbox") {4Checkboxindex =i;5$ (TH). HTML ("<input type=\" checkbox\ "class= ' checkall ' name= ' Checkall '/>"). Find (": CheckBox"). Live ("click",function () {6$ ("#" + t.id + "tr td:nth-child (" + (Checkboxindex + 1) + "): CheckBox"). attr ("Checked", $ ( This). Is (": Checked"));7                             });8                         }9}

View Code

Use the following methods:

{            display: ' Select All ',            name: ' opnion_id ',            width:50,            align: ' center ',            thtype: ' checkbox ',            process : function (Celdiv, id) {                $ (celdiv). HTML ("<input type=\" checkbox\ "value=\" "+ ID +" \ "/>"). Click (function () { C8/>var index = $ (this). Closest ("TD"). Index () + 1;                    var checked = ($ ("#flexme4 tr  td:nth-child (" + Index + "): checkbox:checked"). Size () = = = $ ("#flexme4 tr  td:nth- Child ("+ Index +"): CheckBox "). Size ());                    $ (". Checkall"). attr ("Checked", checked);}}        

1 //get the selected record2 functiongetallchecked () {3 varIndex = $ (". Checkall:eq (1)"). Closest ("th"). Index () + 1;4 vararr = [];5$ ("#flexme4 tr td:nth-child (" + Index + "): checkbox:checked"). each (function(A, n) {6 Arr.push ($ (N). Val ());7 })8 returnarr;9}

View Code

4. Automatically bind columns

This creates the entity based on the data model that the plug-in binds to:

1    Public classFlexigridmodel<t>2     {3         Private int_page =1;4 5          Public intpage6         {7             Get{return_page;}8             Set{_page =value;}9         }Ten  One          Public intTotal {Get;Set; } A          PublicList<rows<t>> Rows {Get;Set; } -     } -      Public classRows<t> the     { -          Public stringID {Get;Set; } -          PublicT Cell {Get;Set; } -}

Data binding

1Flexigridmodel<adminopnionlist> Pagedata =NewFlexigridmodel<adminopnionlist>();2Pagedata.total =data.total;3Pagedata.page =page;4Pagedata.rows =NewList<rows<adminopnionlist>>();5             if(Data.opnion_list! =NULL)6                 foreach(Adminopnionlist Iteminchdata.opnion_list)7                 {8rows<adminopnionlist> rows =NewRows<adminopnionlist>();9Rows.id = item.opnion_id. HasValue? item.opnion_id. Value.tostring ():"";TenRows.cell =item; One pageData.rows.Add (rows); A                 } -  -Returnjsonmsg<adminopnionlist>(pagedata); the  -  -   Public voidReturnjsonmsg<t> (flexigridmodel<t>data) -         { + response.clear (); -             if(Data = =NULL) +Response.Write ("{\ "page\": 1,\ "total\": 0,\ "rows\": []}"); A  at             Else - Response.Write (Newtonsoft.Json.JsonConvert.SerializeObject (data)); - Response.Flush (); - Response.End (); - response.close (); -             return; in}

View Code

　　

Flexigrid use Select all, Auto bind