从List中获取jquery字段

时间:2014-11-27 12:05:24

标签: javascript jquery json jsp jquery-pagination

在下面的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>

1 个答案:

答案 0 :(得分:0)

这可以通过迭代列表来实现

<%
    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>