Question

我正在尝试在jtable中的特定列上添加搜索字段。我目前正在使用gson来传递json数据。这是我的控制器：

public class gsonTestController extends HttpServlet {
    private static final long serialVersionUID = 1L;

    public void doPost(HttpServletRequest request,
                HttpServletResponse response) throws ServletException, IOException {

   String action = request.getParameter("action");
   if ( action != null) 
   {
        List<Student> studentList = new ArrayList<Student>();

        Gson gson = new GsonBuilder().setPrettyPrinting().create();
        response.setContentType("application/json");

        if (action.equals("list")) 
        {
                try
                {                                                                       
                // Add data to Student list
                studentList.add(new Student(1, "Grover", "IT", "xyz@xyz.com"));
                studentList.add(new Student(2, "Bugs Bunny", "ECE", "xyz@gmail.com"));
                studentList.add(new Student(3, "Taz", "MECH", "abc@gmail.com"));
                studentList.add(new Student(4, "Cookie Monster", "ECE", "efg@gmail.com"));
                studentList.add(new Student(5, "Billy the Kid", "CSC", "xyz@gmail.com"));
                studentList.add(new Student(6, "Dustin Hoffman", "CSC", "123@gmail.com"));
                studentList.add(new Student(7, "Obama", "ECE", "789@gmail.com"));
                studentList.add(new Student(8, "Adam Sandler", "ECE", "123@gmail.com"));
                studentList.add(new Student(9, "Pikachu", "IT", "xyz@gmail.com"));

                // Convert Java Object to Json
                String jsonArray = gson.toJson(studentList);

                //Return Json in the format required by jTable plugin
                jsonArray="{\"Result\":\"OK\",\"Records\":"+jsonArray+"}";
                System.out.println(jsonArray);
                response.getWriter().print(jsonArray);
                }
                catch(Exception ex){
                        String error="{\"Result\":\"ERROR\",\"Message\":"+ex.getMessage()+"}";
                        response.getWriter().print(error);
                }                               
                }
            }
         }
}

这会访问Student.java（基本的getter / setter方法），最后将json-ified数据传递给jsp上的以下脚本：

<script type="text/javascript">
        $(document).ready(function() {
                $('#StudentTableContainer').jtable({
                        title : 'Students List',
                        sorting: true,
                        defaultSorting: 'Name',
                        actions : {
                                listAction: 'gsonTestController?action=list',
                                createAction:'gsonTestController?action=create',
                                updateAction: 'gsonTestController?action=update',
                                deleteAction: 'gsonTestController?action=delete'
                        },
                        fields : {
                                studentId : {
                                        title : 'Student Id',
                                        width : '30%',
                                        key : true,
                                        list : true,
                                        create : true
                                },
                                name : {
                                        title : 'Name',
                                        width : '30%',
                                        edit : false
                                },
                                department : {
                                        title : 'Department',
                                        width : '30%',
                                        edit : true
                                },
                                emailId : {
                                        title : 'Email',
                                        width : '20%',
                                        edit : true
                                }
                        }
                });
                $('#StudentTableContainer').jtable('load');
        });
</script>

html很简单：

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

在阅读过滤器的jtable文档时，我无法找到任何使用gson实现过滤器的示例代码（而不是像php或ASP.NET这样的专用服务器端技术）。他们的过滤器演示页面位于：http://www.jtable.org/Demo/Filtering

现在已经批准，我的控制器暂时只使用硬编码数据，因为我还没有设置数据源。最终所有数据都将通过DAO（在Spring MVC中）访问。我不熟悉ASP.NET，但我从页面上的演示中收集到的基本思想是设置变量并根据用户输入的值过滤数据。我只是不确定如何在我目前的结构中设置它。我通读了gson用户指南，但我不确定我需要寻找什么。任何指针都非常感谢。

Answer 1

所以，在他们的过滤器示例中

//Re-load records when user click 'load records' button.
$('#LoadRecordsButton').click(function (e) {
   e.preventDefault();
   $('#StudentTableContainer').jtable('load', {
      name: $('#name').val(),
      cityId: $('#cityId').val()
   });
});

//Load all records when page is first shown
$('#LoadRecordsButton').click();

您可以看到他们只是使用用户编写的参数重新执行对URL的请求，因此您要做的第一件事就是使用

编辑doPost

String studentName = request.getParameter("studentName");

检查是否通过，并过滤集合studentList以仅包含已搜索的学生

if (studentName != null) {
    Iterator<Student> iterator = studentList.iterator();
    while (iterator.hasNext()) {
      if (student.getName().startsWith(studentName)) {
          iterator.remove();
       }
    }
}

（此代码应该在json序列化之前）（如果你使用Guava，你可以使用Iterables.filter等。）

（它只是一个如何实现过滤器的示例，如果从数据库中获取数据，则可以使用SQL查询过滤数据）

现在在studentList内，您将只拥有提供名称的学生，而无需更改代码。

jQuery代码看起来像

$('#LoadRecordsButton').click(function (e) {
   e.preventDefault();
   $('#StudentTableContainer').jtable('load', {
      studentName: $('#name').val()
   });
});

（其中LoadRecordsButton是单击以开始搜索的按钮，StudentTableContainer是表，name是输入文本，其中写入名称）< / p>

如果您希望手动使用Json数据然后使用addRecord jTable，可以避免使用此代码块，但经过一次小搜索我发现它有一些问题，所以我会避免它（How to add record to jTable?）

将搜索字段添加到gson jtable

1 个答案: