从列表中获取 jquery 字段答案

【问题标题】：getting jquery fields from a List从列表中获取 jquery 字段
【发布时间】：2015-01-13 13:55:44
【问题描述】：

在下面的 jsp 代码中，字段是硬代码，但我可以通过使用循环从可能动态增长的列表中获取字段

  List list=[userid,firstname,lastname,email];

对于每个新请求，此列表可能会根据数据库中存在的表的列动态增长或缩小，所以有没有办法在不进行硬编码的情况下获取字段名称..

 <%@ page language="java" contentType="text/html; charset=ISO-8859-1"
        pageEncoding="ISO-8859-1"%>
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <!-- Include one of jTable styles. -->
    <link href="css/metro/crimson/jtable.css" rel="stylesheet" type="text/css" />
    <link href="css/jquery-ui-1.10.3.custom.css" rel="stylesheet" type="text/css" />
    <!-- Include jTable script file. -->
    <script src="js/jquery-1.8.2.js" type="text/javascript"></script>
    <script src="js/jquery-ui-1.10.3.custom.js" type="text/javascript"></script>
    <script src="js/jquery.jtable.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#PersonTableContainer').jtable({
                title: 'Table of people',
                paging: true, //Enable paging
                pageSize: 10, //Set page size (default: 10)           
                actions: {
                    listAction: 'CRUDController?action=list',
                    createAction:'CRUDController?action=create',
                    updateAction: 'CRUDController?action=update',
                    deleteAction: 'CRUDController?action=delete'
                },
                fields: {
                    userid: {
                        title:'S.NO',
                        key: true,
                        list: true,
                        create:true
                    },
                    firstName: {
                        title: 'First Name',
                        width: '30%',
                        edit:false
                    },
                    lastName: {
                        title: 'Last Name',
                        width: '30%',
                        edit:true
                    },
                    email: {
                        title: 'Email',
                        width: '20%',
                        edit: true
                    }                
                }
            });
            $('#PersonTableContainer').jtable('load');
        });
    </script>
    </head>
    <body>
    <div style="width:60%;margin-right:20%;margin-left:20%;text-align:center;">
    <div id="PersonTableContainer"></div>
    </div>
    </body>
    </html>

【问题讨论】：

标签： javascript jquery json jsp jquery-pagination

【解决方案1】：

这可以通过遍历列表来实现

<%
    HttpSession sec = request.getSession();
  List<String> columnsList=(List<String>)sec.getAttribute("columnsList");
%>

<script type="text/javascript">
var jsArray = [<%for (int i = 0; i < columnsList.size(); i++) {%>"<%=columnsList.get(i)%>"<%=i + 1 < columnsList.size() ? ",":""%><%}%>];

var fields={};
var arrayLength = jsArray.length;

for(var i=0;i<arrayLength;i++)
    {
fields[jsArray[i]] = {
    title: jsArray[i],
   width: '40%',


};
}

    $(document).ready(function() {
        $('#PersonTableContainer').jtable({
            title : 'Table of people',
            paging : true, //Enable paging
            sorting: true, //Enable sorting
            defaultSorting: 'Name ASC', //Set default sorting
            pageSize : 10, //Set page size (default: 10)  


            actions : {
                listAction : 'DATA?action=list'

            },
            fields : fields
});


    //Load all records when page is first shown
        $('#PersonTableContainer').jtable('load');


});

</script>

【讨论】：