EasyUI ComboGrid的綁定，上下鍵和回車事件，輸入條件查詢

首先我們先看一下前台的綁定事件

1.先定義標簽

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

2.cmbgrid的綁定方法，這里先全部列出代碼，接下來我們分別看看各個屬性的意思

$('#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: "住院編號",
                    width: 50
                },

            {
                field: 'NAME',
                title: '姓名',
                width: 150
            },
            {
                field: 'SEX',
                title: '性別',
                width: 60,
                formatter: function (value) {
                    if (value == 1) return "男";
                    else if (value == 0) return "女";
                    else return "未知";
                }
            },
            {
                field: 'BIRTHDAY',
                title: '出生日期',
                width: 70,
                formatter: StFormatter
            },
            {
                field: 'BAH',
                title: '病案號',
                width: 60
            },
            {
                field: 'CURR_BED',
                title: '床位號',
                width: 60
            },
            {
                field: 'BRXZMC',
                title: '病人性質',
                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.數據源的獲取，在ashx文件中的返回查詢的數據

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();
}    

 

 

其中idField和textField分別表示ComboGrid的保存值和顯示值。

url指向返回數據源的地址，這里是一個ashx文件

通常后台通過odbc獲取到DataTable之后，轉換為json格式，應為我們這里采用了分頁，所以返回到前台我們需要的格式應該為以下的形式

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

total為數據源的行數量，data為DataTable轉換后的json字符串。

colums的格式和dataGrid是一樣的[[{field:"字段名",title:"列名",width:"長度"}]]

在onselect事件中，我們通過var record =$("#cmbXm").combogrid("grid").datagrid("getSelected")可以獲取到當前選中的行數據，取到綁定數據源當中的各個字段值(record.字段名稱),然后去進行一系列其他操作

接下來我們在enter事件中希望ComboGrid能夠關閉

 var pClosed = $("#cmbXm").combogrid("panel").panel("options").closed;//獲取panel當前的狀態
 if (!pClosed) {
  $("#cmbXm").combogrid("hidePanel");//如果是打開狀態就將其隱藏
 }
//do somthing else

當我們按↑時，選擇上一行的數據

 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);
                    }

這里xm是傳到后台方法中的數據，通過reload方法重新加載數據源

一般我們查詢語句是select * from table where xm like '%'+Request["XM"] and status= Request["STATUS"],這樣我們就可以通過輸入的值q參數，去刷新數據源。

 

至於ComboGrid的賦值取值語句，參考官方的文檔也很容易找到，下面列舉一些比較常用的方法

$('#cmbGrid').combogrid("textbox").val();//獲取cmbGrid的文體上顯示值

$('#cmbGrid').combogrid("getValue");//獲取cmbGrid的實際值

$('#cmbGrid').combogrid("setValue", null);//設置cmbGrid的值

$("#cmbGrid").combogrid("grid").datagrid("getSelected");//獲取cmbGrid選中行

 

最后給出EasyUI ComboGrid的官方API說明，希望對大家有所幫助。

 

用法

Markup

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

<input id="cc" name="dept" value="01">

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

屬性

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

Properties

大多數的屬性和combo與datagrid的屬性是相同的，下面列出一些combogrid私有的屬性.

名稱	類型	描述	默認值
loadMsg	string	當datagrid加載遠程數據時顯示的一個提示消息.	null
idField	string	id名稱.	null
textField	string	在文本框中顯示的字段.	null
mode	string	定義在文本改變時如何加載列表數據.如果組合框從服務器加載就設為 'remote'.	local
filter	function(q, row)	當'mode'設定為'local'如何去選擇本地數據.返回true則選擇行.

 

事件

The events extend from combo and datagrid.

方法

大多數的方法和combo與datagrid的方法是相同的，下面列出一些combogrid私有的方法.

名稱	參數	默認值
options	none	返回組件對象.
grid	none	返回datagrid對象.
setValues	values	用數組設定為組件的值.
setValue	value	設定組件的值.
clear	none	清除組件值.