JQGrid搜索等功能的配置.docx
《JQGrid搜索等功能的配置.docx》由会员分享，可在线阅读，更多相关《JQGrid搜索等功能的配置.docx（27页珍藏版）》请在冰点文库上搜索。
JQGrid搜索等功能的配置
Configuration
Thecolumnsinthegridcanbeusedasthebasisforasearchformtoappearabove,below,orinplaceof,thegrid.Searchingisawayofqueryingdatafromtheserverusingspecifiedcriteria.
Currentlywedonothavemoduleforsearchingonlocaldatai.ewhenadatatypeoptionsissettolocal.Allthesearchingisdoneserverside.
Therearefourapproaches:
atoolbarsearching
acustomsearching
asinglefieldsearching
amorecomplexapproachinvolvingmanyfieldsandconditions-advancedsearching
TheseapproachesusecommonoptionsfromjqGridandsocanbecalledonlyonanalready-constructedgrid.
Everysearchmethodrequirethatsomeadditionalmoduleshouldbeincludedintothepackage.AlsorefertoDownloadorineveryspecificmoduleonwhatshouldbeincluded
Allsearchmodules（exceptcustomsearchingandtoolbarsearching）usesthefollowingdefinitionfromlanguagefile:
$.jgrid={
...
search:
{
caption:
"Search...",
Find:
"Find",
Reset:
"Reset",
odata:
['equal','notequal','less','lessorequal','greater','greaterorequal','beginswith','doesnotbeginwith','isin','isnotin','endswith','doesnotendwith','contains','doesnotcontain'],
groupOps:
[{op:
"AND",text:
"all"},{op:
"OR",text:
"any"}],
matchText:
"match",
rulesText:
"rules"
},
...
colModelOptions
Asof3.5releasejqGridusesacommonsearchoptionsthatcanbeusedoneverysearchmethod.BelowisalistoftheseoptionsthatshouldbesetincolModel.Notethatsomeoptionsarenotapplicableforparticularmethod.
Option
Type
Desscription
Default
search
boolean
Determinesifthefieldcanbesearched.
true
stype
string
Determinesthesearchtypeofthefield.Canbetext-alsoainputelementwithtypetextiscreatedandselect-aselectelementiscreated
text
searchoptions
object
Objectwhichcontaindefinition,eventsandotherpropertiesforthesearchedfield.Seebelow
Thesearchoptionsobjecthavethefollowingproperties:
Thesearchoptionsarenotapplicabletocustomsearchmethod.Thismethodusesseparateoptions.
Property
Type
Description
dataUrl
string
Thisoptionisvalidonlyfortheelementsoftypeselect-i.estype:
'select'.Theoptionrepresenttheurlfromwhereweloadtheselectelement.Whenthisoptionissettheelementwillbefilledwithvaluesfromtheajaxrequest.Thedatashouldbeavalidhtmlselectelementwiththedesiredoptions.Byexampletherequestshouldcontain.Thisiscalledonlyonce.
buildSelect
function
ThisoptionhavesenseonlyifthedataUrlparameterisset.Incasewheretheserverresponsecannotbuildtheselectelementyoucanuseyouronfunctiontobuildtheselect.Thefunctionshouldreturnastringcontainingtheselectandoptionsvalue（s）asdescribedindataUrloption.Parameterpassedtothisfunctionistheserverresponse
dataInit
function
Ifsetthisfunctioniscalledonlyoncewhentheelementiscreated.Tothisfunctionwepasstheelementobject.
dataInit:
function（elem）{
dosomething
}
Alsousethisfunctiontoattachdatepicker,timepickerandetc.Example:
dataInit:
function（elem）{
$（elem）.datepicker（）;
}
dataEvents
array
Listofeventstoapplytothedataelement;uses$（”#id”）.bind（type,[data],fn）tobindeventstodataelement.Shouldbedescribedlikethis:
dataEvents:
[
{type:
'click',data:
{i:
7},fn:
function（e）{console.log（e.data.i）;}},
{type:
'keypress',fn:
function（e）{console.log（'keypress'）;}}
]
attr
object
attrisobjectwherewecansetvalidattributestothecreatedelement.Byexample:
attr:
{title:
“Sometitle”}
Willsetatitleofthesearchedelement
searchhidden
boolean
Bydefaulthiddenelemntsinthegridarenotsearchable.Inordertoenablesearchingwhenthefieldishiddensetthisoptiontotrue
sopt
array
Thisoptionisusedonlyinadvancedsinglefieldsearchinganddeterminestheoperationthatisappliedtotheelement.Ifnotsetalltheavailableoptionswillbeused.Allavailableoptionare:
['eq','ne','lt','le','gt','ge','bw','bn','in','ni','ew','en','cn','nc']
Thecorrespondingtextsareinlanguagefileandmeanthefollowing:
['equal','notequal','less','lessorequal','greater','greaterorequal','beginswith','doesnotbeginwith','isin','isnotin','endswith','doesnotendwith','contains','doesnotcontain']
Notethattheelementsinsoptarraycanbemixedinanyorder.
defaultValue
string
Ifnotemptysetadefaultvalueinthesearchinputelement.
value
mixed
Theoptionisusedonlyforstypeselectanddefinestheselectoptionsinthesearchdialogs.WhensetforstypeselectanddataUrloptionisnotset,thevaluecanbeastringorobject.
Iftheoptionisastringitmustcontainasetofvalue:
labelpairswiththevalueseparatedfromthelabelwithacolon（:
）andendedwith（;）.Thestringshouldnotendedwitha（;）-editoptions:
{value:
“1:
One;2:
Two”}.Ifsetasobjectitshouldbedefinedaspairname:
value-editoptions:
{value:
{1:
'One';2:
'Two'}}
Note:
whenthedataUrlinsearchoptionsobjectisnotusedforthesearchtypeselect,thedefinitionsfortheselectaretakenfirstfromsearchoptionsvaluepropertyandifthisisnotdefinedaeditoptionsvaluepropertyisused-i.eeditoptions:
{value:
“1:
one;2:
two”,…}.Seebelowhowtousetheseoptionsindifferentsearchmethods.
colModelconventions:
Whatyouneedtoknow
Allsearchmodulesusestheurlparameteringridtoperformthesearch.Insomemethodsthereisadditionalseparateoptionfortheurlwhichcanbeusedtoo.
WhenthesearchisperformedthepostDataarrayisfilledwiththeneededdataforthesearch.
Theparametersearchingridoptionsissettotrueinordertoindicatethesearching.Serversidethenameofthisis_search（notethedifference）whichcanbeobtainedusingtheGETorPOSTdataarray.
WhenthegridistriggeredwhenusingtherefreshbuttoninNavigatorthesearchoptionissettofalse.
EverysearchmethodcreatesitsownmethodtoclearthesearcheddatafrompostDataarray.Usethesemethodstodothis.
ToolbarSearching
Thismethodconstructsearchingcreatinginputelementsjustbelowtheheaderelementsofthegrid.Whentheheaderelementsareresizedtheinputsearchelementsarealsoresizedaccordingtothenewwidth.
Themethodusestheurloptioningridtoperformasearchtotheserver.
Whenthesearchisactivated,anarrayoftypename:
valueispostedtotheserver.NotethatthisarrayisaddedtothepostDataparameter.Wepostonlyfieldsthathaveanenteredvalue.Whenweclearthethesearchform,thevaluesaredeletedfromthepostDataarray.Whenpostingtotheserver,wetrytopass,notthename,buttheindexsetincolModel.Whentheindexisnotfoundweusethename.Additionally,weadda_search=truetotheposteddata.
Installation
InordertousethismethodaCustommoduleshouldbecheckedwhenyoudownloadthegrid.FormoreinformationrefertoDownload
CallingConvetion
...
jQuery（"#grid_id"）.filterToolbar（options）;
...
orusingthenewAPI
...
jQuery（"#grid_id"）.jqGrid（'filterToolbar',options）;
...
Where:
grid_idistheidofalreadyconstructedgrid
optionsisaobjectcontainingdifferentconfigurationsetting.Seebelow
Thiscommandwillcreateasearchelementssomethinglikethis:
ThismethodusesthedefinitionsforsearchingfromcolModel.SeeConfiguration
TheoptionsinfilterToolbarmethodare
Option
type
Description
Default
autosearch
boolean
Searchisperformedaccordingtothefollowingrules:
fortextelementwhenaEnterkeyispressedwhileinputtingvaluesandsearchisperformed.Forselectelementwhenthevaluechanges.Thesearchparameteringridissettotrueandajaxcallismade.
true
beforeSearch
function
eventwhichfiresbeforeasearch.Itiscalledbeforetriggeringthegrid.Iftheeventreturntruetriggeringdoesnotoccur.Inthiscaseyoucanconstructyourownsearchparametersandtriggerthegridtosearchthedata.Anyotherreturnvaluecausestriggering.
null
afterSearch
function
eventwhichfiresafterasearch
null
beforeClear
function
eventwhichfiresbeforeclearingenteredvalues（i.e.,clearToolbarisactivated）.Itiscalledbeforeclearingthedatafromsearchelements.Iftheeventreturntruetriggeringdoesnotoccur.Inthiscaseyoucanconstructyourownsearchparametersandtriggerthegrid.Anyotherreturnvaluecausestriggering.
null
afterClear
function
eventwhichfiresafterclearingenteredvalues（i.e.,clearToolbaractivated）
null
Thesoptoptioninsearchoptionsdoesnothaveefectinthismethod.
WhenwecreatetoolbarsearchwithfilterToolbarwecreateadditionalmethodsasfollow
Method
Description
triggerToolbar
Whenthismethodiscalledasearchisperformed,thesearchparameteringridbecomestrueandajaxcallismadetotheserver
clearToolbar
Whencalledclearthesearchvaluessendarequestwithsearchoptionsettofalseandsetthedefaultoneifavailable
toggleToolbar
Toggelesthetoolbarwiththesearchelements
Usingtheadditionalmethods
Themethodslistedaboveshouldbeusedthisway:
...
varsgrid=$（"#grid_id"）[0];
sgrid.triggerToolbar（）;
CustomSearching
Thismethodcanbecalledtoconstructancustomsearchformforthegrid.
Themethodusesthe
升级会员 