Attendance System-Code analysis DataGrid

The DataGrid is a Easyui control, the DataGrid presents data in tabular form, and provides rich support for selecting, sorting, grouping, and editing data. The DataGrid is designed to shorten development time and to make it unnecessary for developers to have specific knowledge. It is lightweight and feature-rich. Cell merging, multi-column headings, frozen columns, and footers are just a few of the features.

Build: Set up with table tags

<id= "dg"  style= "width:1100px"></table  >

Create a DataGrid with jquery and add columns.

$ ("#dg"). DataGrid ({URL:"Kaoqinbiaozhunselect",        //Defining Columnscolumns:[[{field:' id ', title: ' Serial number ', width:100}, {field:' Shangban ', title: ' Working Hours ', width:100,sortable:true, Formatter:function(value,row,index) {Valuee=getDate (value); returnValuee; },}, {field:' Xiaban ', title: ' Time Off ', width:100, Formatter:function(value,row,index) {Valuee=getDate (value); returnValuee; },}, {field:' Jidu ', title: ' Quarter ', width:100}, {field:' Chidao ', title: ' Late ', width:100, Formatter:function(value,row,index) {return"More than" +value+ "minutes"; },}, {field:' Kuanggong ', title: ' Absenteeism ', width:100, Formatter:function(value,row,index) {return"More than" +value+ "minutes"; },}, {field:' Qiyongtype ', title: ' Enabled state ', width:100, Formatter:function(value,row,index) {Switch(value) { Case1:return"Enable in ..."; Break;  Case2:return"Not enabled"; Break; }}, Styler:function(value,row,index) {if(Value = = 1){                            return' Color:red; '; }                    },                },                ]],

The URL specifies the servlet, which calls the background logic method in the servlet for the data source, to query the database and return the data. The data that the DataGrid receives must be in JSON format, encapsulating a JSON in a encapsulated form to facilitate the data being queried by the database to be formatted.

Encapsulate JSON:

 Public classPagejson<t> {    Private intTotal = 0; Privatelist<t> rows =NewArraylist<t>();  Public intgettotal () {returnTotal ; }     Public voidSettotal (intTotal ) {         This. Total =Total ; }     PublicList<t>getRows () {returnrows; }     Public voidSetrows (list<t>rows) {         This. rows =rows; }     PublicPagejson (intTotal, list<t>rows) {        Super();  This. Total =Total ;  This. rows =rows; }     PublicPagejson () {Super(); }

Call:

New Pagejson<kqjiabanxinxi>();         = "{\" total\ ": 0,\" rows\ ": []}";         int New Jiabanxinxidao (). Gettotalall (map);         if (total>0) {            Listnew  Jiabanxinxidao (). GETPAGELISTKQ (page, rows,map,sort);            Pj.settotal (total);            Pj.setrows (list);             = jsonobject.tojsonstring (PJ);        }         return Rtn;

When the DataGrid receives the data, it displays the data in the data table, in the column field: ' Field name corresponding to JSON '

Other properties:

Striped:true,  //  Zebra effect        rownumbers:true,       //  Display line number         pagination:true,      / / Show page bar        //  page row count select list        Pagesize:4,        // initial number of        rows per page Remotesort:true,        sortname:' id ',        sortOrder:' desc ',

You can add a button in the DataGrid data table, toolbar:

toolbar:[            {iconcls:' Icon-search ', Text: ' Query ', Handler:function () {                = $ ("#form2"). Serialize ();                $ ("#dg"). DataGrid ({URL: "Kaoqinbiaozhunselect?") +f}). DataGrid (' Load ')},},            //  add            {iconcls: ' Icon-add ', Text: ' Add ', Handler: function () {                type= "Add";                $ ("#id"). TextBox ({readonly:false});                $ ("#form1"). Form (' reset ');                $ ("#saveBiaoZhun"). Dialog (' Open ')            },},

You can also add jquery on the button to implement the functionality.

Page Show:

Attendance System-Code analysis DataGrid