jQuery के EasyUI Datagrid + Yii फ्रेमवर्क

मुझे एक टेबलेट चाहिए! मैं छँटाई के साथ एक लेबल, वैकल्पिक पृष्ठांकन और बूटस्ट्रैप के समान एक शैली चाहता हूं, लेकिन ताकि आप इसमें कई, कई कॉलम जोड़ सकें।

अग्रिम में क्या तैयार करने की आवश्यकता है?

1. Yii फ्रेमवर्क ( http://www.yiiframework.com/ )
आपको बिल्डिंग प्रोजेक्ट्स के लॉजिक को डाउनलोड, इंस्टॉल, रन, डील करना होगा।

2. जिजीए ईज़ीयूआई ( http://www.jeasyui.com/ )
आपको Yii फ्रेमवर्क में प्रोजेक्ट संसाधन फ़ोल्डर को डाउनलोड, अनज़िप और कॉपी करना होगा और निम्नलिखित फ़ाइलों को कनेक्ट करना होगा:

/easyui/themes/default/easyui.css
/easyui/themes/icon.css
/easyui/jquery-1.8.0.min.js
/easyui/jquery.easyui.min.js

आगे क्या है?

1. कंट्रोलर में एक क्रिया जोड़ें जो प्लेट बनाने के लिए डेटा लौटाएगा। मेरे मामले में, एक अग्रेषण लेखा प्रणाली के एक मॉडल का उपयोग किया जाएगा।

public function actionGetData() { $model = new DislocOrders(); $rs = $model->findAll(); $items = array(); //     foreach( $rs as $row ) { //      ,     $items[] = array( 'order_id' => $row->id, 'vagon_no' => $row->vagon_no, 'sp_name' => $row->sp_name, 'fp_name' => $row->fp_name, 'op_name' => $row->op_name, 'op_st_name' => $row->op_st_name, 'op_date' => $row->op_date, 'days_wm' => $row->days_wm, ); } header('Content-Type: application/json'); echo CJSON::encode( array( total => count($items), //  -  rows => $items, //  ) ); Yii::app()->end(); } 

2. उसी लेबल के html कोड को जोड़कर दृश्य बदलें

एक पृष्ठ पर ग्रिड जोड़ने के लिए कम से कम दो तरीके हैं: इसे html प्लेट के रूप में वर्णित करें या जावास्क्रिप्ट का उपयोग करें।

 <table class="easyui-datagrid" title="Basic DataGrid" style="width:auto;height:500px" data-options="singleSelect:true,collapsible:true,url:'<?php echo Yii::app()->createUrl("dislocOrders/getData"); ?>'"> <thead> <tr> <th data-options="field:'vagon_no',width:80">№ </th> <th data-options="field:'sp_name',width:100">. </th> <th data-options="field:'fp_name',width:80,align:'right'">. </th> <th data-options="field:'op_st_name',width:60,align:'center'">. </th> <th data-options="field:'op_name',width:80,align:'right'"></th> <th data-options="field:'op_date',width:250"> </th> <th data-options="field:'days_wm',width:60,align:'center'">  -</th> </tr> </thead> </table> 

3. हम पृष्ठ को रीफ्रेश करते हैं और आगे के विकास के अच्छे अवसरों के साथ, सबसे सरल ग्रिड प्राप्त करते हैं। अधिकांश पैरामीटर सहज हैं और आगे स्पष्टीकरण की आवश्यकता नहीं है।




4. पेजेशन जोड़ें, इसके लिए ग्रिड का सेट = "सही" गुण सेट करना आवश्यक है और नियंत्रक में दो "पंक्तियों" मापदंडों को संसाधित करें - एक पृष्ठ पर प्रदर्शित रिकॉर्ड की संख्या और "पृष्ठ" - प्रदर्शित पृष्ठ की संख्या।

दृश्य संशोधित करें:

 <table class="easyui-datagrid" title="Basic DataGrid" style="width:auto;height:500px" pagination="true" data-options="singleSelect:true,collapsible:true,url:'<?php echo Yii::app()->createUrl("dislocOrders/getData"); ?>'"> <thead> <tr> <th data-options="field:'vagon_no',width:80">№ </th> <th data-options="field:'sp_name',width:100">. </th> <th data-options="field:'fp_name',width:80,align:'right'">. </th> <th data-options="field:'op_st_name',width:60,align:'center'">. </th> <th data-options="field:'op_name',width:80,align:'right'"></th> <th data-options="field:'op_date',width:250"> </th> <th data-options="field:'days_wm',width:60,align:'center'">  -</th> </tr> </thead> </table> 

नियंत्रक को संशोधित करें:

 public function actionGetData() { $model = new DislocOrders(); $criteria = new CDbCriteria(); $count=DislocOrders::model()->count($criteria); $criteria->limit = $_POST['rows']; //    ! $criteria->offset = $_POST['rows']*($_POST['page']-1); //    ! $rs = DislocOrders::model()->findAll($criteria); $items = array(); //     foreach( $rs as $row ) { //      ,     $items[] = array( 'order_id' => $row->id, 'vagon_no' => $row->vagon_no, 'sp_name' => $row->sp_name, 'fp_name' => $row->fp_name, 'op_name' => $row->op_name, 'op_st_name' => $row->op_st_name, 'op_date' => $row->op_date, 'days_wm' => $row->days_wm, ); } header('Content-Type: application/json'); echo CJSON::encode( array( total => $count, //  -  rows => $items, //  ) ); Yii::app()->end(); } 

5. सॉर्टिंग जोड़ें। ऐसा करने के लिए, ग्रिड के लिए सॉर्टनेम = "ऑर्डर_आईडी" और सॉर्टऑर्डर = "एस्क" गुण जोड़ें, जो डिफ़ॉल्ट रूप से सॉर्ट करने के लिए जिम्मेदार होगा, कॉलम में सॉर्टेबल = "सही" संपत्ति जोड़ें, फिर कंट्रोलर में "सॉर्ट" मापदंडों को संसाधित करें। - वह कॉलम जिसके द्वारा छँटाई की जाती है, और "क्रम" छँटाई का प्रकार है।

दृश्य संशोधित करें:

 <table class="easyui-datagrid" title="Basic DataGrid" style="width:auto;height:500px" pagination="true" sortName="vagon_no" sortOrder="asc" data-options="singleSelect:true,collapsible:true,url:'<?php echo Yii::app()->createUrl("dislocOrders/getData"); ?>'"> <thead> <tr> <th data-options="field:'vagon_no',width:80" sortable="true">№ </th> <th data-options="field:'sp_name',width:100" sortable="true">. </th> <th data-options="field:'fp_name',width:80,align:'right'">. </th> <th data-options="field:'op_st_name',width:60,align:'center'">. </th> <th data-options="field:'op_name',width:80,align:'right'"></th> <th data-options="field:'op_date',width:250"> </th> <th data-options="field:'days_wm',width:60,align:'center'" sortable="true">  -</th> </tr> </thead> </table> 

नियंत्रक को संशोधित करें:

 public function actionGetData() { $model = new DislocOrders(); $criteria = new CDbCriteria(); $count=DislocOrders::model()->count($criteria); //    ! $criteria->limit = $_POST['rows']; $criteria->offset = $_POST['rows']*($_POST['page']-1); $criteria->order = $_POST['sort']." ".$_POST['order']; $rs = DislocOrders::model()->findAll($criteria); $items = array(); //     foreach( $rs as $row ) { //      ,     $items[] = array( 'order_id' => $row->id, 'vagon_no' => $row->vagon_no, 'sp_name' => $row->sp_name, 'fp_name' => $row->fp_name, 'op_name' => $row->op_name, 'op_st_name' => $row->op_st_name, 'op_date' => $row->op_date, 'days_wm' => $row->days_wm, ); } header('Content-Type: application/json'); echo CJSON::encode( array( total => $count, //  -  rows => $items, //  ) ); Yii::app()->end(); } 

6. अपनी सामग्री को परिवर्तित करने वाले फ़ंक्शन को निर्दिष्ट करके कॉलम की सामग्री को बदलें:

 <table class="easyui-datagrid" title="Basic DataGrid" style="width:auto;height:500px" pagination="true" sortName="vagon_no" sortOrder="asc" data-options="singleSelect:true,collapsible:true,url:'<?php echo Yii::app()->createUrl("dislocOrders/getData"); ?>'"> <thead> <tr> <th data-options="field:'vagon_no',width:80,formatter:createLink" sortable="true">№ </th> <th data-options="field:'sp_name',width:100" sortable="true">. </th> <th data-options="field:'fp_name',width:80,align:'right'">. </th> <th data-options="field:'op_st_name',width:60,align:'center'">. </th> <th data-options="field:'op_name',width:80,align:'right'"></th> <th data-options="field:'op_date',width:250"> </th> <th data-options="field:'days_wm',width:60,align:'center'" sortable="true">  -</th> </tr> </thead> </table> <script> function createLink(val,row){ return '<a href="<?php echo Yii::app()->createUrl("dislocOrders/viewHistory"); ?>?id='+row.order_id+'">'+val+'</a>'; } </script> 

निष्कर्ष

नतीजतन, हमारे पास छंटाई, पृष्ठांकन के साथ एक अच्छा डेटाग्रिड है, जो आसानी से कोशिकाओं की सामग्री को संशोधित करने की क्षमता है, जो एक ही समय में ट्विटर बूटस्ट्रैप का उपयोग करके बनाए गए डिज़ाइन में पूरी तरह से फिट बैठता है।