JQGrid搜索等功能的配置.docx
- 文档编号:11840829
- 上传时间:2023-04-05
- 格式:DOCX
- 页数:27
- 大小:74.01KB
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:
jQuery("#grid_id").jqGrid({
...
colModel:
[
...
{name:
'price',index:
'price',width:
60,search:
true,stype:
'text',searchoptions:
{dataInit:
datePick,attr:
{title:
'SelectDate'}}},
...
]
...
});
datePick=function(elem)
{
jQuery(elem).datepicker();
}
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
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- JQGrid 搜索 功能 配置