Dappers (3)-list page

This article is similar to last year's "development on iPad" series, but with the help of easyui's full introduction and secondary customization, the overall UI framework has achieved better results, it also completely achieves the development purpose on the iPad: I often adjust the UI on the iPad.

Even for a simple functional interface, most components of easyui are basically used:

• ComboBox
• Combotree
• DataGrid
• Form
• Validatebox
• Tree
• Window

 

To implement the above "user management" list, you only need:

{Title: 'user management ',
URL: '/system/grideditor/find ',
Mappingtype: 'basearea. Contract. basedata. sysuser ',
Mappingsql: 'sysuser. list ',
Columns :[[
{Title: 'user account', field: 'usercode', width: 120, align: 'center', sortable: True },
{Title: 'user name', field: 'name', width: 120, align: 'center', sortable: True },
{Title: 'user Gender', field: 'sex', formatter: isfemale, width: 120, align: 'center', sortable: True },
{Title: 'user Unit', field: 'officename ', width: 120, align: 'center', sortable: True },
{Title: 'user departments', field: 'destentname', width: 120, align: 'center', sortable: True },
{Title: 'user status', field: 'isactive', formatter: isactive, width: 120, align: 'center', sortable: True },
{Title: 'user phone', field: 'tel ', width: 120, align: 'center', sortable: True },
{Title: 'role', field: 'role', formatter: Assign, width: 60, align: 'center '},
{Title: 'region', field: 'District ', formatter: assigndistrict, align: 'center', width: 60}
],
Sortname: 'usercode ',
Sortorder: 'asc'
}

 

The action that the URL points to the load data.

Mappingtype is the ing type of the result set.

Ingsql is similar to the configuration file of mybatis, pointing to the key

 

At the same time, each list needs to be filtered by query conditions to make sense:

{Colspans: 2, width: 600, height: 184,
Model :[
{Display: 'user account', name: 'prm _ usercode_lk _ ', colspan: 1, type: 'text '},
{Display: 'user name', name: 'prm _ name_lk _ ', colspan: 1, type: 'text '},
{Display: 'user status', name: 'prm _ status _ ', type: 'select '},
{Display: 'user phone', name: 'prm _ tel_lk _ ', type: 'text '}
]}

 

No manual work is required. Click the "query" button in the list header to bring up the filter conditions.

 

In addition, the filtering condition item can

• Set the default parameter value, value: 'zhang %'
• Display/hide by default, hidden: True
• Number of columns of each control, colspan: 1, 2, 3
• Each user and role can set the default conditions, display and hide, set the default order, and set the number of lines per page.
• Each user and role uses the "save" and "delete" link to customize and restore the UI.

 

Finally, the navigation tree on the left is usually provided on the list interface. You only need:

{URL: '/basedata/office/jsontree '}

 

The easyui tree is displayed. Additional tree and grid interactions require script writing.

 

 

The UI development interface is as follows, which provides batch import and everywhere functions, which greatly facilitates the rapid deployment of the test environment-production environment: