javascript - 通过 Struts 2 操作类从数据库填充下拉列表(使用 jtable)

标签 javascript jquery json struts2 jquery-jtable

我正在使用jtable http://jtable.org/在我的项目中。 jTable 是一个 jQuery 插件,用于创建基于 AJAX 的 CRUD 表,无需编写 HTML 或 Javascript。

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 模式 /Demo/GetContinentalOptions

由于jtable只能理解json,所以请指导我应该在Struts2 Action类和Struts.xml中写什么

注意:在示例代码中,您甚至可以对下拉值进行硬编码

最佳答案

您可以使用以下操作填充 json 字段。您还需要一个convention plugin使用注释。要使用 json 结果,您需要 json plugin .

@Action(value="GetContinentalOptions", results=@Result(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;
   }
}

选项函数中

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

编辑:

如果没有约定插件,您应该在 struts.xml 中编写操作配置

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

关于javascript - 通过 Struts 2 操作类从数据库填充下拉列表(使用 jtable),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24506509/

相关文章:

javascript - 什么是 "DOMException: Entry already exists"?

json - 如何在 JSON 文件中定义变量并在 JSON 文件中使用它

jquery - 使用 jQuery 返回颜色名称

jquery - 带有选项卡的 Bootstrap div 在页面加载时自动显示第二个选项卡

jQuery/css 目标第 n 个子类

mysql - 当 JSON 文档中不存在路径时如何使用 JSON_ARRAY_APPEND?

json - serde_json::from_str 错误,其中字符串来自文件

javascript - 使用匹配在字符串中查找 ID

javascript - 将原型(prototype)/方法添加到 jQuery val();

javascript - Java 的 "TODO"出现在概览标尺中,但 JS 没有出现?