Java_easyui system DataGrid (2)

Java_easyui system DataGrid (2)
I. Introduction

Add the layout component on the basis of 1 to dynamically query data from the background to the foreground through conditions. The query is used as a panel in layout.

II. Key Points
1 ,:


2. Folding component on the left:

The folding component is in the west layout of the overall layout. The second div class in is the key:

Content1
 
 
                    
  
  
Portal
                    
  
  
User Management
                    
 
 
                                

3. query the storage component of form:

This is an embedded page: Pay attention to using the div of the embedded page as the layout container, do not use the body, otherwise there will be some inexplicable problems. The following code is:

1. embed a tabs div,

2. a tab of this div about "user management" is embedded with a user. jsp page,

3. the user. jsp page is a layout page using div, a form with query conditions in the northern region, and a datagrid with data displayed in the middle.

4. Click to query the newly loaded data:

This is the use of the load method, and the load method parameters need an object (of course, it can also be the name: value of a field ). One is to serialize all information in the form into a form object and pass it to the foreground.

1. load it when you enter for the first time. This is in $ (function () {$ ('# datagrid '). in datagrid ({url: '', xxx,

2. Click "query": load the data of the specified datagrid. Here, you can directly use the "load" method of the datagrid. First, you must select the id of the table displayed as the datagrid, rather than anything else.

// Query data function show () {$ ('# datagrid'). datagrid ('load', serializeObject ($ ('# searchForm ')));}

3. In the above Code, serializeObject ($ ('# searchForm') converts all information in form into an object as the load parameter. A form can be greatly simplified when many parameters are to be passed, but it is not a built-in function of jquery, it is self-extended, and its implementation code (put in js) is below.

serializeObject = function(form){var o = {};$.each(form.serializeArray(), function(index){if(o[this['name']]){o[this['name']] = o[this['name']] + this['value'];}else{o[this['name']] = this['value'];}});return o;};

3. Page source code

Home Page (datagrid2.jsp ):

<% @ Page language = "java" import = "java. util. *" pageEncoding = "UTF-8" %>          My JSP 'original. jsp 'starting page        
     
     
 <Script type = "text/javascript" src = "js/jquery. min. js "> </script> <script type =" text/javascript "src =" js/jquery. easyui. min. js "> </script> <script type =" text/javascript "src =" js/chyUtils. js "> </script> <script type =" text/javascript "> function userManage (id) {console.info (id); if (" door "= id) {$ ('# tt '). tabs ('select', 0);} if ("userManage" = id) {$ ('# tt '). tabs ('select', 1) ;}</script>  Content1
 
 
                    
  
  
Portal
                    
  
  
User Management
                    
 
 
Portal

Embedded user. jsp:

<Script type = "text/javascript"> $ (function () {$ ('# datagrid '). datagrid ({url: 'login _ getJson. action ', title: 'user list', iconCls: 'icon-save', pagination: true, pageSize: 10, pageList: [90,100,], fit: true, // make the table adaptive fitColumns: true, // make the sum of all column widths in the table equal to the adaptive width, that is, if the browser changes the size, will the scroll bar appear below? Generally, nowrap is used only when the number of columns is small: false, // The text in the table can be wrapped with a line break, the default value is false, and the line break is not allowed. In this way, you cannot see all the text in many cases: use real data to test border: false, idFeild: 'id', // id, will record the id of the selected item, not necessarily the id, usually use the primary key sortName: 'id ', // set the default sorting field (which must be a field in the field) sortOrder: 'asc ', // It is sorted in ascending or descending order, but adding only these two fields will not be automatically sorted. The meaning of this write is that the foreground will automatically pass two parameters to the background: sort order, we can sort columns: [{title: 'number', field: 'id', width: 100, // must be given to // sortable: true, // specify the order}, {title: 'name', field: 'username', width: 100, // required}, {title: 'Password', field: 'Password', width: 100, // required], toolbar: [{text: 'add', iconCls: 'icon-add', handler: function () {}}, '-', {text: 'delete', iconCls: 'icon-delete', handler: function () {}}, '-', {text: 'modify', iconCls: 'icon-edit', handler: function (){}}, '-']}) ;}); // query data function show () {$ ('# datagrid '). datagrid ('load', serializeObject ($ ('# searchForm');} // clear the query condition and return the initial data display status function clean () {$ ('# datagrid '). datagrid ('load', {}); $ ('# searchForm '). find ('input '). val ('') ;}</script>
 
 

Referenced js:

serializeObject = function(form){var o = {};$.each(form.serializeArray(), function(index){if(o[this['name']]){o[this['name']] = o[this['name']] + this['value'];}else{o[this['name']] = this['value'];}});return o;};

Iv. Additional instructions

1. When DUAL the datagrid, you can use the toolbar to directly add the function button, or use div

2. When using datatimebox, add editable = false.

3. When querying, using load, instead of using reload, the page will be changed back to the home page During load query, and reload will be checked from the page you selected

4. When using embedded pages as layout, do not set the body to class = "easyui-layout" and use div as the layout container.

5. The collapsed component type is set through class = "easyui-accordion"-and then through div. Instead of embedding layout in the imagination.

6. You can click "class =" easyui-accordion "to dynamically display a tabs component.

More: java_easyui system directory-00