Question

这里的字段是硬编码的，但我想为我的任务动态获取字段，就像我将在这个jsp中有一个列表，其中包含字段名称，例如：list=[id,name,salary,doj]此列表可能会针对新请求进行更改。我可以有一些想法吗

 fields: {
                    PersonId: {
                        key: true,
                        create: false,
                        edit: false,
                        list: false
                    },
                    Name: {
                        title: 'Author Name',
                        width: '40%'
                    },
                    Age: {
                        title: 'Age',
                        width: '20%'
                    },
                    Watch: {
                        title: 'Watch',
                        width: '20%',
                        display: function (data) {
                        return '';
                    },
                    RecordDate: {
                        title: 'Record date',
                        width: '30%',
                        type: 'date',
                        create: false,
                        edit: false
                    }
                }
            });

Answer 1

您可以在服务器端动态构建Javascript代码。

对于客户端，您还可以动态创建字段。

var fields = {
    PersonId: { //I assume that this field is standard
        key: true,
        list: false
    }
};

if(someCondition) {
    fields['Name'] = {
        title: 'Author Name',
        width: '40%'
    };
}

//Add other dynamic fields

$('#PersonTableContainer').jtable({
    title: 'Table of people',
    actions: {
        listAction: '/GettingStarted/PersonList',
        createAction: '/GettingStarted/CreatePerson',
        updateAction: '/GettingStarted/UpdatePerson',
        deleteAction: '/GettingStarted/DeletePerson'
    },
    fields: fields
});

在您的情况下，您可以确定地从列表中添加字段。

Answer 2

我通过参考上述答案发布了整个代码

<%@page import="java.util.ArrayList"%>
<%@page import="java.util.List"%>
<%@ 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">
<title>Setup and Load Data to jTable using Servlets and JSP</title>
<!-- 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">
<% List<String> strList = new ArrayList<String>();
strList.add("one");
strList.add("two");
strList.add("three"); %>

var jsArray = [<% for (int i = 0; i < strList.size(); i++) { %>"<%= strList.get(i) %>"<%= i + 1 < strList.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',
            actions: {
                listAction: 'CRUDController?action=list',
                createAction:'CRUDController?action=create',
                updateAction: 'CRUDController?action=update',
                deleteAction: 'CRUDController?action=delete'
            },
            fields:fields

        });
        $('#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>

jtable中使用jquery的动态字段

2 个答案: