Easyui Combogrid bindings, up and down keys and carriage return events, input condition query

First, let's look at the binding events at the foreground.

1. Define Labels First

<id= "CMBXM"  type= "text"  style= "width:100px;" />

2.cmbgrid binding method, where all the code is listed first, and then we look at the meaning of each property separately

$(‘#cmbXm‘).combogrid({
                panelWidth: 570,
                idField: ‘PATIENT_NO‘,
                textField: ‘NAME’,
                Url: ‘/Ashx/yzxt.ashx?flag=GetData‘,
                Dalay: 200,
                Method: ‘get’,
                Cache: false,
                Pagination: true,
                Columns: [[{
                    Field: "PATIENT_NO",
                    Title: "Hospital number",
                    Width: 50
                },

            {
                Field: ‘NAME’,
                Title: ‘name’,
                Width: 150
            },
            {
                Field: ‘SEX‘,
                Title: ‘sex ‘,
                Width: 60,
                Formatter: function (value) {
                    If (value == 1) return "male";
                    Else if (value == 0) return "female";
                    Else return "unknown";
                }
            },
            {
                Field: ‘BIRTHDAY’,
                Title: ‘date of birth’,
                Width: 70,
                Formatter: StFormatter
            },
            {
                Field: ‘BAH’,
                Title: ‘medical case number’,
                Width: 60
            },
            {
                Field: ‘CURR_BED‘,
                Title: ‘bed number ‘,
                Width: 60
            },
            {
                Field: ‘BRXZMC’,
                Title: ‘patient nature’,
                Width: 60
            }]],
                onSelect: function (recordidex) {
                    Var record = $("#cmbXm").combogrid("grid").datagrid("getSelected");

                    setPatient(record);

                },
                keyHandler: {
                    Enter: function () {

                        Var pClosed = $("#cmbXm").combogrid("panel").panel("options").closed;
                        If (!pClosed) {
                            $("#cmbXm").combogrid("hidePanel");
                        }
                        Var record = $("#cmbXm").combogrid("grid").datagrid("getSelected");
                        If (record == null || record == undefined) return;
                        Else {
                            setPatient(record);
                        }
                    },
                    Up: function () {
                        Var pClosed = $("#cmbXm").combogrid("panel").panel("options").closed;
                        If (pClosed) {
                            $("#cmbXm").combogrid("showPanel");
                        }
                        Var grid = $(‘#cmbXm‘).combogrid("grid");
                        Var rowSelected = grid.datagrid("getSelected");
                        If (rowSelected != null) {
                            Var rowIndex = grid.datagrid("getRowIndex", rowSelected);
                            If (rowIndex > 0) {
                                rowIndex = rowIndex - 1;
                                Grid.datagrid("selectRow", rowIndex);
                            }
                        } else if (grid.datagrid("getRows").length > 0) {
                            Grid.datagrid("selectRow", 0);
                        }
                    },
                    Down: function () {
                        Var pClosed = $("#cmbXm").combogrid("panel").panel("options").closed;
                        If (pClosed) {
                            $("#cmbXm").combogrid("showPanel");
                        }
                        Var grid = $(‘#cmbXm‘).combogrid("grid");
                        Var rowSelected = grid.datagrid("getSelected");
                        If (rowSelected != null) {
                            Var totalRow = grid.datagrid("getRows").length;
                            Var rowIndex = grid.datagrid("getRowIndex", rowSelected);
                            If (rowIndex < totalRow - 1) {
                                rowIndex = rowIndex + 1;
                                Grid.datagrid("selectRow", rowIndex);
                            }
                        } else if (grid.datagrid("getRows").length > 0) {
                            Grid.datagrid("selectRow", 0);
                        }
                    },
                    Query: function (q) {
                        $(‘#cmbXm‘).combogrid("setValue", null);
                        $(‘#cmbXm‘).combogrid("grid").datagrid("clearSelections");
                        $(‘#cmbXm‘).combogrid("grid").datagrid("reload", {
                            ‘xm‘: q,
                            ‘STATUS’: $(‘#selzt‘).val(),
                            ‘sid1’: new Date().getTime(),
                            ‘sid2’: Math.round(Math.random() * 1000)
                        });
                        $(‘#cmbXm‘).combogrid("textbox").val(q);
                    }
                }
            }); 

3. Data source acquisition, return query data in the Ashx file

 
private void GetData()
{ string tiaojian =Request["xm"];
 DataTable dt= ExecuteQuery("select * from table where xm like"+tiaojian); string l_strJson = Common.Common.ConvertEntityToJson(dt); int total=dt.Rows.Count; string s = "{\"total\":" + total + ",\"rows\":" + l_strJson + "}";
                Response.Write(s);
                Response.End();
} 

where IDfield and TextField respectively represent the saved and displayed values of Combogrid.

The URL points to the address of the returned data source, here is a ashx file

Usually after the background through ODBC to get to the DataTable, converted to JSON format, should be used for our paging here, so return to the foreground we need the format should be the following form

string s = "{\" total\ ":" + total + ", \" rows\ ":" + Data + "}";

Total is the number of rows for the data source, and data is the JSON string converted from the DataTable.

The colums format is the same as the DataGrid [[{field: ' Field name ', Title: ' Column name ', Width: ' length '}]]

In the Onselect event, we passed the Var record =$ ("#cmbXm"). Combogrid ("Grid"). The DataGrid ("getselected") can get to the currently selected row data, taking to the individual field values in the bound data source ( Record. Field name), then go to a series of other operations

Next we want Combogrid to be able to close in the Enter event

Var pClosed = $("#cmbXm").combogrid("panel").panel("options").closed;//Get the current state of the panel
  If (!pClosed) {
   $("#cmbXm").combogrid("hidePanel");//If it is open, hide it
  }
//do somthing else

When we press ↑, select the previous row of data

 
 up: function () {
                        var pClosed = $("#cmbXm").combogrid("panel").panel("options").closed;
                        if (pClosed) {
                            $("#cmbXm").combogrid("showPanel");
                        }
                        var grid = $(‘#cmbXm‘).combogrid("grid");
                        var rowSelected = grid.datagrid("getSelected");
                        if (rowSelected != null) {
                            var rowIndex = grid.datagrid("getRowIndex", rowSelected);
                            if (rowIndex > 0) {
                                rowIndex = rowIndex - 1;
                                grid.datagrid("selectRow", rowIndex);
                            }
                        } else if (grid.datagrid("getRows").length > 0) {
                            grid.datagrid("selectRow", 0);
                        }
                    }

Select the next row of data when ↓

 
 down: function () {
                        var pClosed = $("#cmbXm").combogrid("panel").panel("options").closed;
                        if (pClosed) {
                            $("#cmbXm").combogrid("showPanel");
                        }
                        var grid = $(‘#cmbXm‘).combogrid("grid");
                        var rowSelected = grid.datagrid("getSelected");
                        if (rowSelected != null) {
                            var totalRow = grid.datagrid("getRows").length;
                            var rowIndex = grid.datagrid("getRowIndex", rowSelected);
                            if (rowIndex < totalRow - 1) {
                                rowIndex = rowIndex + 1;
                                grid.datagrid("selectRow", rowIndex);
                            }
                        } else if (grid.datagrid("getRows").length > 0) {
                            grid.datagrid("selectRow", 0);
                        }
                    }

Returns the results of our conditional query when you enter a condition query

 
 query: function (q) {
                        $(‘#cmbXm‘).combogrid("setValue", null);
                        $(‘#cmbXm‘).combogrid("grid").datagrid("clearSelections");
                        $(‘#cmbXm‘).combogrid("grid").datagrid("reload", {
                            ‘xm‘: q,
                            ‘STATUS‘: $(‘#selzt‘).val(),
                            ‘sid1‘: new Date().getTime(),
                            ‘sid2‘: Math.round(Math.random() * 1000)
                        });
                        $(‘#cmbXm‘).combogrid("textbox").val(q);
                    }

Here XM is the data that is uploaded to the back-end method, and the data source is reloaded via the Reload method

Generally our query statement is a SELECT * from table where the XM like '% ' +request["XM"] and status= request["status"], so that we can go through the input value Q parameter, to refresh the data source.

As for Combogrid's assignment value statement, it is easy to find the official documentation, and some of the more common methods are listed below.

$ (' #cmbGrid '). Combogrid ("TextBox"). Val ();//Get Cmbgrid's stylistic display value

$ (' #cmbGrid '). Combogrid ("GetValue");//Get the actual value of Cmbgrid

$ (' #cmbGrid '). Combogrid ("SetValue", null);//Set the value of Cmbgrid

$ ("#cmbGrid"). Combogrid ("Grid"). DataGrid ("getselected");//Get Cmbgrid Select row

Finally give Easyui Combogrid official API Description, hope to help you.

Usage

Markup

<select id= "CC" name= "dept" style= "width:250px;" ></select>

<input id= "CC" name= "dept" value= ">"

Jquery

$ (' #cc '). Combogrid (options);

For example:

$ (' #cc '). Combogrid ({

PANELWIDTH:450,

Value: ' 006 ',

IDfield: ' Code ',

TextField: ' Name ',

URL: ' Datagrid_data.json ',

columns:[[

{field: ' Code ', title: ' Code ', width:60},

{field: ' Name ', title: ' Name ', width:100},

{field: ' addr ', title: ' Address ', width:120},

{field: ' Col4 ', title: ' Col41 ', width:100}

]]

});

Dependencies

• Combo
• Datagrid

Property

Extend from $.fn.combo.defaults and $.fn.datagrid.defaults.
Override defaults with $.fn.combogrid.defaults.

Properties

Most of the properties and combo are the same as the DataGrid properties, and some of the Combogrid private properties are listed below.

Name Type Describe Default value Loadmsg String A prompt message that is displayed when the DataGrid loads remote data. Null IDfield String The ID name. Null TextField String The field that is displayed in the text box. Null Mode String Defines how the list data is loaded when the text changes. If the combo box is loaded from the server, it is set to ' remote '. Local Filter function (q, ROW) When the ' mode ' is set to ' local ' how to select the data locally. Returns True to select rows.

Event

The events extend from combo and DataGrid.

Method

Most of the methods and combo are the same as the DataGrid method, and some of the Combogrid private methods are listed below.

Name Parameters Default value Options None Returns the Component object. Grid None Returns the DataGrid object. Setvalues Values Sets the value of the component as an array. SetValue Value Sets the value of the component. Clear None Clears the component value.

Easyui Combogrid bindings, up and down keys and carriage return events, input condition query