🔛 🚵🏽 💇🏿 इंस्टेंट दलिया - जेकग्रीड के साथ कैच में CRUD बनाना 🧑🏼‍🤝‍🧑🏻 📥 📶

यह सारणीबद्ध डेटा - jqGrid प्रदर्शित करने के लिए एक जावास्क्रिप्ट प्लगइन का उपयोग करके Intersystems Caché पर एक वेब एप्लिकेशन बनाने के बारे में होगा। प्लगइन का उल्लेख अक्सर हैबे पर किया जाता है, इसलिए मुख्य ध्यान कैचे द्वारा इसके उपयोग की सुविधाओं पर ध्यान दिया जाएगा
JqGrid का उपयोग करने के लाभ :

क्लाइंट लॉजिक से सर्वर ऑफलोडिंग
विभिन्न डेटा विनिमय प्रारूपों (xml, json) का उपयोग करने की क्षमता
डेटा प्रदर्शित करने के विभिन्न तरीके (टेबल, ट्री, नेस्टेड टेबल)
डेटा बदलने के लिए तैयार कार्यक्षमता - लाइनों में संपादन, रूपों में संपादन, डेटा की जाँच
प्रलेखन, उदाहरण और स्रोत कोड के साथ बड़ी संख्या में सेटिंग्स, विकल्प और घटनाएं
समृद्ध उपयोगकर्ता कार्यक्षमता - छंटाई, समूहन, फ़िल्टरिंग, खोज, परिणाम, स्तंभों का प्रदर्शन (दृश्यता, क्रम, आकार) सेट करना, jqueryui से बहुत सारे दृश्य विषयों के लिए समर्थन

डिश की संरचना : डेटा के साथ एक संग्रहीत वर्ग, एक पृष्ठ वर्ग, एक डेटा सेवा वर्ग। आवश्यक पुस्तकालयों और शैलियों को डेटा डिलीवरी नेटवर्क ( सीडीएन ) और डेवलपर्स की वेबसाइटों से जोड़ा जाता है, इसलिए, उदाहरण के लिए स्थानीय नेटवर्क पर काम करने के लिए, उन्हें इन स्रोतों से डाउनलोड करने की आवश्यकता होगी।

चेतावनी : उदाहरण जितना संभव हो उतना सरल है, प्लगइन की क्षमताओं का केवल एक छोटा सा हिस्सा माना जाता है, लेकिन अभी भी बहुत सारे कोड हैं, हालांकि यह सावधानी से प्रलेखित है।

आदर्श

इस डिश का आधार क्लास मॉडल.पर्सन होगा ।
Caché Studio में एक संग्रहीत वर्ग बनाएँ। फ़ाइल - क्रिएट - कैच क्लास

संग्रहित वर्ग मॉडल.पर्सन का स्रोत कोड

/// सरल संग्रहीत वर्ग
वर्ग मॉडल। पर्सन का विस्तार ( % स्थायी , % आबाद ) {

/// नाम - इंगित करें कि कौन सा फ़ंक्शन भरना है
संपत्ति का नाम % स्ट्रिंग ( POPSPEC = "नाम ()" );
सूचकांक नाम पर नाम;

/// जन्म का वर्ष
संपत्ति वर्ष के रूप में % पूर्णांक ( MAXVAL = 2012 , MINVAL = 1910 );

/// वर्ष दर वर्ष खोज और तेज़ होगी
सूचकांक वर्ष पर वर्ष [ प्रकार = बिटमैप];

}

हम परीक्षण उदाहरणों की एक छोटी संख्या उत्पन्न करते हैं - स्टूडियो (Alt + 2) की "आउटपुट" विंडो पर जाएं और निष्पादित करें:

write ##class(model.person).Populate(100000)

राय

चलो डेटा प्रदर्शन पृष्ठ बनाते हैं - आवश्यक शैलियों और सहायक पुस्तकालयों के साथ view.person वर्ग।

View.person वर्ग के लिए स्रोत कोड

 ///     <class>model.person</class> ///   <a href="http://www.trirand.com/blog/">jqgrid</a> Class view.person Extends %CSP.Page { /// node     Parameter DOMAIN = "person"; ///     ClassMethod OnPage() As %Status { &html<<!DOCTYPE html> <html lang="ru"><head> <meta charset="ru"/> <title>#($$$Text("Intersystems Caché + jqGrid"))#</title> <style> /*      */ body {font-size: 11px; font-family: Georgia,Verdana,Arial,sans-serif; } </style> <!--     --> <link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.8.24/themes/base/jquery-ui.css" /> <!--     --> <link rel="stylesheet" type="text/css" href="http://www.trirand.net/themes/ui.jqgrid.css" /> <!-- ,    --> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <!--   (, , etc.) --> <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script> <!--    jgGrid--> <script src="http://www.trirand.net/js/trirand/i18n/grid.locale-ru.js"></script> <!--     --> <script src="http://www.trirand.net/js/trirand/jquery.jqGrid.min.js"></script> <!--    --> <script src="themeswitcher.js"></script> </head><body> <!--    c    --> <table id="grid"></table> <!--    --> <div id="bar"></div> <!--    --> <div id="theme"></div> <!--   --> <script type="text/javascript"> $( function(){ //  document.ready var $grid=$( "#grid" ) //     , bar="#bar" //    , url='#(..Link("service.person.cls"))#' ; $grid.jqGrid({ //  ,      caption: '#($$$Text("person"))#' , colModel: [ //    { name: 'name', width: 250, editable: true } ,{ name: 'year', editable: true } ] , pager: bar //      , url: url //  , editurl: url //    , datatype: "json" //    , mtype: 'POST' , jsonReader: { //     //      //      //       repeatitems: false } , height: 350, width: 900 //   , rownumbers: true //     , rownumWidth: 45 //       , viewrecords: true //      , gridview: true //   ,     , scroll: 1 //    , hoverrows: true //      , rowNum: 100 //   ,    , sortable: true //    , sortname: 'name' //      }) .jqGrid('filterToolbar',{searchOnEnter:false}) //  .jqGrid('gridResize', {}) //      ; ///        var serverHandler=function( resp ){ var array=[]; try { array=eval(resp.responseText); } catch(err){ return ["",e.description]; } return array; }; ///      / ,  var opts={ afterSubmit: serverHandler //    , closeAfterAdd: true //      , clearAfterAdd: true //       , closeAfterEdit: true //      //  .     .    , viewPagerButtons: false }; //    $grid.jqGrid('navGrid',bar, { edit: true, edittext: '#($$$Text(""))#' , add: true, addtext: '#($$$Text(""))#' , del: true, deltext: '#($$$Text(""))#' , view: false, search: false } , opts //  , opts //  , opts //  ); //     //   pager   $(bar+"_center").remove(); //  ,  UPD themeswitcher( $( "#theme" ) ); });</script></body></html>> Quit $$$OK } }

नियंत्रक

डेटा सेवा वर्ग के कोड पर जाने से पहले, सर्वर के साथ प्लग-इन डेटा के आदान-प्रदान के लिए प्रोटोकॉल और स्वरूपों के बारे में बात करना आवश्यक है। प्लगइन एसिंक्रोनस रूप से सर्वर से डेटा के कुछ हिस्सों को लोड करता है, निम्न प्रकार के अनुरोध भेजता है:

?rows=100&page=2&_search=true&name=McCormick&sidx=name&sord=desc

कहाँ: पंक्तियाँ - भाग में डेटा लाइनों की संख्या, पृष्ठ - भाग की क्रम संख्या, _search - खोज मोड (चालू या बंद), मैककॉर्मिक - तालिका के स्तंभ नाम में खोज मान, साइडेक्स - सॉर्ट फ़ील्ड, सॉर्ड - क्रम क्रम
प्रतिक्रिया में, jqGrid को निम्नलिखित डेटा की उम्मीद है (उदाहरण के लिए, निम्नलिखित json डेटा प्रारूप चुना गया है)

 {"records": 102, "total": 2, "page": 2, "rows": [ { "id": 1,"name": "McCormick,Diane Z.", "year": 1910 } ,{ "id": 2,"name": "McCormick,Christen G.", "year": 1911 } ]}

कहाँ, रिकॉर्ड - पंक्तियों की कुल संख्या, कुल - सर्वर पर डेटा की संख्या की संख्या, पृष्ठ - डेटा का पंक्ड हिस्सा, पंक्तियाँ - डेटा सरणी

एडिटूरल पैरामीटर में निर्दिष्ट पते पर आने वाले प्लगइन से डेटा बदलने के लिए अनुरोध निम्नानुसार हैं:

निर्माण ?oper=add&id=_empty&name=habra&year=2005
परिवर्तन ?oper=edit&id=1&name=habra&year=2006
हटाएं ?oper=del&id=1

इन अनुरोधों के लिए सर्वर रिस्पॉन्स को आफ्टरसुमिट फंक्शन में प्रोसेस किया जाता है, जिसके परिणामस्वरूप फॉर्म की एक सरणी होनी चाहिए:
[ result, error, id ]
कहां: परिणाम क्वेरी का परिणाम है (सही || गलत), त्रुटि त्रुटि संदेश है यदि परिणाम == गलत, आईडी ऑब्जेक्ट पहचानकर्ता का मूल्य है (निर्माण संचालन के मामले में)

यह प्रोटोकॉल सेवा.पर्सन डेटा सर्विस क्लास द्वारा लागू किया जाएगा, जो आने वाले अनुरोध मापदंडों को पार्स करेगा, एक विशिष्ट प्रारूप में एक गतिशील अनुरोध और डेटा प्रदर्शित करेगा।

वर्ग सेवा के लिए स्रोत कोड

  #;    csp.inc #;      service.person ///      ///    %request #define get(%name) $g(%request.Data(%name,1))

 Include csp ///  -  Class service.person Extends %CSP.Page { /// node    Parameter DOMAIN = "person"; /// Can only be referenced from another CSP page Parameter PRIVATE = 1; ClassMethod OnPage() As %Status { #; . csp.inc set oper=$$$get("oper") ;   #;    -     if ( oper = "add" ) Quit ..Add() Q:oper="edit" ..Edit() Q:oper="del" ..Del() #;     -    #;          set rows=$$$get("rows")\1 ;  if ( rows < 1 ) { set rows = 100 ;       } #;       s page=$$$get("page")\1 s:page<1 page=1 #;     (   - ) #;  sql  where    s where="", params="", search=$CASE( $$$get("_search"), "true": 1, : 0 ) if ( search ) { s name=$$$get( "name" ) if ( name'="" ) { #;  name  ,     #;     s where=where_$ListBuild( "name Like ?" ) s params( $increment(params) )="%"_name_"%" } s year=$$$get( "year" ) if ( year'="" ) { #; year -   SQL -     s where=where_$LB( """year"" = ?" ) ;  -  , params( $i( params ) )=year\1 ; } s where=$ListToString(where," AND ") } #;      #;          s countSQL=" SELECT Count(*) as records FROM model.person " if ( search ) s countSQL=countSQL_" WHERE "_where s records=0 #dim RS as %SQL.StatementResult s stmt=##class(%SQL.Statement).%New() s sc=stmt.%Prepare(countSQL) if 'sc d ..ShowError(sc) Q $$$OK s RS=stmt.%Execute(params...) if RS.%SQLCODE d ##class(%SYSTEM.SQL).SQLCODE(RS.%SQLCODE) Q $$$OK s:RS.%Next() records=RS.records kill RS #;     s total = records\rows ;  , part=records#rows ; s:part total=total+1 ;       #;   ,       s:page>total page=total ; #;        s end=page*rows, start=end-rows #;       #;    sql order by #;    jqgrid    s order="",sidx=$$$get( "sidx" ), sord=$$$get( "sord" ) #;       if $ListFind( $ListBuild("name","year"), sidx ) { s:sidx="year" sidx="""year""" ;year -    sql s order=sidx _ " "_$CASE( sord, "desc": "desc", : "asc" ) } #;      #;    ,   ID s sql=" SELECT ID From model.person " s:search sql=sql_" WHERE "_where s:order'="" sql=sql_" ORDER BY "_order s sc=stmt.%Prepare(sql) if 'sc d ..ShowError(sc) Q $$$OK s RS=stmt.%Execute(params...) if RS.%SQLCODE d ##class(%SYSTEM.SQL).SQLCODE(RS.%SQLCODE) Q $$$OK write "{" ;    , """records"": ", records ;     , ", ""total"": ", total ;   , ", ""page"": ", page ;    , ", ""rows"": [" ;   #;      #;    JSON - http://json.org #;  ..QuoteJS()   #;-    #define json(%str) """"_$replace($zcvt(%str,"O","JS"),"\'","'")_"""" #;  s sc="" for { s sc=RS.%Next() Quit:sc=0 s rnum=RS.%ROWCOUNT if (rnum < start) continue ;    if (rnum > end) Quit ;    #;    ,   #;rnum>1 -    ,  start=0 if ( rnum > start ) && ( rnum > 1 ) { w "," } s name=##class(model.person).nameGetStored(RS.ID) , year=##class(model.person).yearGetStored(RS.ID) w "{""id"":",RS.ID,",""name"":",$$$json(name),",""year"":",$$$json(year),"}" } w "]}" Q $$$OK } ///    ClassMethod Add() As %Status { s obj=##class(model.person).%New() Q ..Set(.obj) } ///     ClassMethod Edit() As %Status { s id=$$$get("id"), obj=##class(model.person).%OpenId(id,.sc) if $$$ISERR( sc ) { Q ..wResult( sc, id ) } Q ..Set(.obj) } ///  ,  ,   ClassMethod Set(obj As model.person) As %Status { if ( $g(obj) = "" ) || ( '$IsObject(obj) ) { s sc=$$$ERROR( $$$GeneralError, $$$Text("   ") ) Q ..wResult( sc ) } s obj.name=$$$get("name") s obj.year=$$$get("year") s id="", sc=obj.%Save() s:$$$ISOK(sc) id=obj.%Id() Q ..wResult( sc, id ) Q $$$OK } ///   ClassMethod Del() As %Status { s id=$$$get("id"), sc=##class(model.person).%DeleteId(id) Q ..wResult( sc, id ) Q $$$OK } ///   ClassMethod wResult(sc As %String = "", id As %String) As %Status { s result="false", msg="", id=$g(id) if $$$ISOK( $g(sc) ) { s result="true" } else { s msg=##class(%SYSTEM.Status).GetOneErrorText(sc) } w "[",result,",",..QuoteJS(msg),",",..QuoteJS(id),"]" Q $$$OK } }

एप्लिकेशन को लॉन्च करने के लिए, कैश स्टूडियो में, व्यू.पर्सन क्लास खोलें और F5 दबाएं। एक कामकाजी उदाहरण यहां तैनात है।

नमक और चीनी स्वाद के लिए

एक अपेक्षाकृत सरल कार्य को लागू करने के लिए आवश्यक बड़ी मात्रा में कोड के कारण एक उदाहरण एक चौंकाने वाला प्रभाव बना सकता है। इस बिंदु पर, आपको यह याद रखने की आवश्यकता है कि कैच एक ऑब्जेक्ट-ओरिएंटेड डीबीएमएस है और इस कोड के अधिकांश भाग को पैरेंट कक्षाओं में रखा और रखा जा सकता है, या एक इंटरैक्टिव संवाद के रूप में कार्यान्वित किया जा सकता है जो आवश्यक कक्षाओं का एक सेट बनाता है। फिर, इस उदाहरण को लागू करने के लिए, केवल दो मापदंडों की आवश्यकता थी - संग्रहीत वर्ग का नाम और इसके गुणों की सूची।

UPD: यह लेख के प्रकाशन के दिन था कि jqueryui.com ने अपने डिजाइन और संरचना को बदल दिया, थीमwitchertool.js को एक्सेस से हटा दिया। अब इसके सरलीकृत कार्यात्मक समकक्ष का उपयोग किया जाता है, स्रोत को यहां ले जाया जा सकता है ।

इंस्टेंट दलिया - जेकग्रीड के साथ कैच में CRUD बनाना

आदर्श

राय

नियंत्रक

नमक और चीनी स्वाद के लिए

More articles: