2014-07-01 62 views
1

我在我的項目中使用jtable http://jtable.org/。 jTable是一個jQuery插件,用於創建基於AJAX的CRUD表,無需編碼HTML或Javascript。通過struts2動作類(使用jtable)從數據庫填充下拉列表

http://i62.tinypic.com/3461eo3.jpg

以上形式

JTable中的代碼是

HTML代碼

<div id="StudentTableContainer"></div> 

Javascript代碼

<script type="text/javascript"> 



    $(document).ready(function() { 



     $('#StudentTableContainer').jtable({ 

      title: 'Student List', 

      paging: true, 

      pageSize: 10, 

      sorting: true, 

      defaultSorting: 'Name ASC', 

      actions: { 

       listAction: '/Demo/StudentList', 

       deleteAction: '/Demo/DeleteStudent', 

       updateAction: '/Demo/UpdateStudent', 

       createAction: '/Demo/CreateStudent' 

      }, 

      fields: { 

       StudentId: { 

        key: true, 

        create: false, 

        edit: false, 

        list: false 

       }, 

       Name: { 

        title: 'Name', 

        width: '30%' 

       }, 

       EmailAddress: { 

        title: 'Email address', 

        list: false 

       }, 

       Password: { 

        title: 'User Password', 

        type: 'password', 

        list: false 

       }, 

       Gender: { 

        title: 'Gender', 

        options: { 'M': 'Male', 'F': 'Female' }, 

        list: false 

       }, 

       ContinentalId: { 

        title: 'Continental', 

        options: '/Demo/GetContinentalOptions', 

        list: false 

       }, 

       CountryId: { 

        title: 'Country', 

        dependsOn: 'ContinentalId', //Countries depends on continentals. Thus, jTable builds cascade dropdowns! 

        options: function (data) { 

         if (data.source == 'list') { 

          //Return url of all countries for optimization. 

          //This method is called for each row on the table and jTable caches options based on this url. 

          return '/Demo/GetCountryOptions?continentalId=0'; 

         } 



         //This code runs when user opens edit/create form or changes continental combobox on an edit/create form. 

         //data.source == 'edit' || data.source == 'create' 

         return '/Demo/GetCountryOptions?continentalId=' + data.dependedValues.ContinentalId; 

        }, 

        list: false 

       }, 

       CityId: { 

        title: 'City', 

        width: '30%', 

        dependsOn: 'CountryId', //Cities depends on countries. Thus, jTable builds cascade dropdowns! 

        options: function (data) { 

         if (data.source == 'list') { 

          //Return url of all cities for optimization. 

          //This method is called for each row on the table and jTable caches options based on this url. 

          return '/Demo/GetCityOptions?countryId=0'; 

         } 



         //This code runs when user opens edit/create form or changes country combobox on an edit/create form. 

         //data.source == 'edit' || data.source == 'create' 

         return '/Demo/GetCityOptions?countryId=' + data.dependedValues.CountryId; 

        } 

       }, 

       BirthDate: { 

        title: 'Birth date', 

        type: 'date', 

        displayFormat: 'yy-mm-dd', 

        list: false 

       }, 

       Education: { 

        title: 'Education', 

        list: false, 

        type: 'radiobutton', 

        options: [ 

         { Value: '1', DisplayText: 'Primary school' }, 

         { Value: '2', DisplayText: 'High school' }, 

         { Value: '3', DisplayText: 'University' } 

        ] 

       }, 

       About: { 

        title: 'About this person', 

        type: 'textarea', 

        list: false 

       }, 

       IsActive: { 

        title: 'Status', 

        width: '15%', 

        type: 'checkbox', 

        values: { 'false': 'Passive', 'true': 'Active' }, 

        defaultValue: 'true' 

       }, 

       RecordDate: { 

        title: 'Record date', 

        width: '25%', 

        type: 'date', 

        displayFormat: 'yy-mm-dd', 

        create: false, 

        edit: false, 

        sorting: false //This column is not sortable! 

       } 

      } 

     }); 



     //Load student list from server 

     $('#StudentTableContainer').jtable('load'); 

    }); 



</script> 

我想有一個下拉在我的項目應採取價值從數據庫通過struts2動作類。 如上面的演示代碼,大陸的名單可以從數據庫中通過Struts2的動作類(使用URL模式/演示/ GetContinentalOptions訪問

由於JTable中既懂JSON所以請指導我,我應該在Struts2的Action類編寫和struts.xml的

注:在您的示例代碼,你甚至可以硬編碼下拉值

回答

1

您可以填充以下動作的JSON場還需要一個convention plugin使用註釋要使用JSON結果你需要。 json plugin

@Action(value="GetContinentalOptions", [email protected](type="json", params = {"root", "map"})) 
public class ContinentalOptionsAction extends ActionSupport {  
    Map<String, String> map=new HashMap<>(); 

    public Map<String, String> getMap() { 
    return map; 
    } 

    @Override 
    public String execute() throws Exception { 
     map.put("1", "Asia"); 
     map.put("2", "America"); 
     map.put("3", "Europe"); 
     map.put("4", "Africa"); 
     return SUCCESS; 
    } 
} 

options功能

var options = []; 
$.ajax({ //get from server 
    url: '<s:url action="GetContinentalOptions"/>', 
    dataType: 'json', 
    success: function (data) { 
     options = data; 
    } 
}); 
return options; 

編輯:

沒有Convention插件,你應該寫在操作配置struts.xml

<action name="GetContinentalOptions" class="com.action.ContinentalOptionsAction"> 
    <result type="json"> 
    <param name="root" value="map"/> 
    </result> 
</action> 
+0

請指導我如何可以不用傳統的做插入。並且還提供struts.xml的格式 – Hirak

+0

@Hirak請參閱編輯,以xml格式添加配置,這相當於我以前通過註釋使用的。 –