jquery easyui使用combobox,datagrid,layout實例(標簽實現)

使用easyui實現的錄入頁面(靜態)，datagrid使用html標簽顯示，下一篇再放上js版。
html頁面：
js引用：jquery-1.8.0.min.js,easyui.min.js,easyui-lang-zh_CN.js,不需要loader的可不要easyloader.js

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
  <head>
    <title>補錄雜費</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

    <link rel="stylesheet" type="text/css" href="../themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="../themes/icon.css">

    <script type="text/javascript" src="../jquery-1.8.0.min.js"></script>
    <script type="text/javascript" src="../src/easyloader.js"></script>
    <script type="text/javascript" src="../jquery.easyui.min.js"></script>
    <script type="text/javascript" src="../locale/easyui-lang-zh_CN.js"></script>
    <!-- loader設置 -->
    <script type="text/javascript">
        easyloader.locale = "zh_CN";
        easyloader.base = '../';
        easyloader.timeout = 2000;     //毫秒
        easyloader.load(['combobox']);
    </script>
    
    <script type="text/javascript" src="scripts/tag.js"></script>

          <script type="text/javascript">
        //屏蔽只讀組件的刪除事件。頁面中不可編輯元素下按backspace鍵會使瀏覽器后退到上一個頁面。
        //好像只有在IE下會有此問題，FF中沒有此問題。
        document.onkeydown=function(e){   
            //IE不傳e,使用window.event獲得；firefox則從e中獲得事件
            var event=e||window.event;
    
            var key=event.keyCode||event.which;
            //var type=event.srcElement.type||event.target.type;
            //var stat=event.srcElement.readOnly||event.target.readOnly;
            if(event.srcElement){
                var type=event.srcElement.type;
                var stat=event.srcElement.readOnly;
            }else if(event.target){
                var type=event.target.type;
                var stat=event.target.readOnly;
            }
            
            if(key==8){    //刪除鍵的keyCode為8
             if((type!="text"&&stat==true)||(type!="textarea"&&stat==true)||(type!="select"&&stat==true)){
                        event.keyCode=0;    
                        event.returnValue=false;   
                }
            }        
          }
    </script>

    <style type="text/css">
    <!--
        * { color:#1A438E; font:normal 12px/20px Tahoma, "宋體", Verdana, sans-serif; font-size:12px; padding:0; margin:0; vertical-align:middle;}
        /*所有table,td統一顏色*/
        table{ background:#8AB3DB; }
        td{ background:#FFF; }
        td.labelColumn{ background-color:#E0ECF9;}
        /*輸入框樣式*/
        input,select,
        textarea{ font:normal 12px/120% Tahoma, Verdana, sans-serif; padding-left:2px; padding-right:2px;}
        /*只讀區，包括input和td*/
        .read { background-color:#E6E6E6 !important; color:#000; }
        input.read { border:none !important;}
        
        .clearAll { clear:both; }
        .lineDiv { line-height:1px; height:1px; font-size:1px; }
        /*按鈕組*/
        #buttons { margin:5px; text-align:right; clear: both;}
        #buttons input[type=button],
        #buttons input[type=submit]{ width:auto; height:auto; margin:0 5px; }
        /*表頭*/
        #headerTable input,
        #headerTable select{ width: 120px; padding:0px; margin:0 1px; height:20px; line-height:20px;}
        /*合計*/
        table#sum2 input.fit { margin:0px; padding:0px; }
        table#sum2 input.fat { margin:0px; padding:0px; }
        
    -->
    </style>
    <script type="text/javascript">
        $(function(){
            
        });
        
    </script>
  </head>
  <body>
  
<div class="container" style="width:880px; border:none; margin:0px auto;">
<form action="http://www.cnblogs.com/auditk_kp_json/addKpPassengerTicket.action" method="post" name="ticketForm" id="ticketForm" >
    
    <!-- 功能按鈕組 -->
      <div id="buttons">&nbsp;
      <input name="saveButton" type="button" id="saveButton" value="保存(S)" accesskey="S"/ onClick="submitForm();">&nbsp;
      <input name="resetButton" type="button" id="resetButton" value="重置(R)" accesskey="R" onClick="resetForm();"/>&nbsp;
      <input name="cancelButton" type="button" id="cancelButton" value="返回" onClick="cancelForm();" />
    </div>
    
  <!--表頭-->
  <div id="headerDiv" class="easyui-panel" iconCls="icon-ok" style="padding:0px;border:none;">
        <table id="headerTable" width="100%" align="left" border="0" cellpadding="0" cellspacing="1">
            <tr>
                            <td width="10%" height="26"  align="right" class="labelColumn" >票據類型：</td>
                            <td width="14%" height="26" align="center"  class="read">
                                <input name="ticketType" type="text" id="tickettype" class="read" size="8" readonly="readonly" /></td>
                            <td width="10%" height="26"  align="right" class="labelColumn" >車站：</td>
                            <td width="14%" height="26" align="center" class="read">
                                <input name="stationName" type="text" id="stationname" class="read" value="" size="10" readonly="readonly" /></td>
                            <td width="10%" height="26"  align="right" class="labelColumn" >結賬日期： </td>
                            <td width="14%" height="26" align="center" class="read">
                                <input name="kpTicket.settleDate" type="text" id="kpTicket.settleDate" class="easyui-datebox" size="16" /></td>
                            <td width="10%" height="26" align="center" class="labelColumn">
                                    
                            </td>
              <td width="14%" height="26" align="center">
                <!--主表隱藏域[需提交的]-->

                <!--補錄主表ID-->
                <input name="kpTicket.pid" type="hidden" value="" />
                 <!--車站電報碼ID(dbm)-->
                <input name="kpTicket.sellStation" type="hidden" value="" />
                <!--票據類型ID-->
                <input name="kpTicket.ntype" type="hidden" value="" />
                
              </td>
          </tr>
          <tr>
                            <td align="center" class="labelColumn" >票價(元)</td>
<td align="center" class="read"><input name="kpTicket.amount" type="text" class="read" id="kpTicket.amount" onBlur="checkAmount();" value="0.00" readonly="readonly"/></td>
                            <td align="center" class="labelColumn">總人數</td>
                            <td align="center" class="read"><input name="kpTicket.personQuantity" type="text" class="read" id="kpTicket.personQuantity" value="1" readonly="readonly" /></td>
                            <td height="26" align="right" class="labelColumn">
                                <input name="batchFlag" type="checkbox" value="" style="width:20px;" onChange="setBatchFlag(this);"/>批量錄入</td>
                            <td height="26">
                                 <input name="batchNum" type="text" class="inputxt easyui-numberbox" style="width:40px;margin:1px;" onChange="setBatchNum(this);" value="1" />(批量張數)</td>
                            <td height="26" align="center" class="labelColumn">
                                <span class="labelColumn">
                                <!--作廢標記1為作廢-->
                                <input name="kpTicket.blankOut" type="checkbox" value="" style="width:20px;" onChange="setblankOut(this);"/>
                                廢票 </span>
                            </td>
                            <td height="26" align="left">&nbsp;</td>
          </tr>
                    <tr>
                            <td height="26" align="center" class="labelColumn">車次<span style="color:red">*</span></td>
                            <td width="" align="center">
                            <input name="kpTicket.train" id="kpTicket.train" type="text" class="inputxt easyui-validatebox" data-options="required:true" onBlur="formatTrain(this);"/></td>
                            <td align="center" class="labelColumn">票符<span style="color:red">*</span></td>
                            <td align="center">
                            <input name="kpTicket.symbol" type="text" id="kpTicket.symbol" class="inputxt easyui-validatebox" data-options="required:true" /></td>
                            <td align="center" class="labelColumn">起始票號<span style="color:red">*</span></td>
                            <td align="center">
                            <input name="kpTicket.num" type="text" id="kpTicket.num" class="inputxt easyui-numberbox easyui-validatebox" data-options="required:true"/></td>
                            <td align="center" class="labelColumn">終止票號</td>
                            <td align="center" class="read">
                            <input name="kpTicket.endNum" type="text" class="read" id="kpTicket.endNum" readonly="readonly" /></td>
          </tr>
                    <tr>
                            <td height="26" align="center" class="labelColumn">發站<span style="color:red">*</span></td>
                            <td align="center">
                        <input name="kpTicket.startStation" type="text" class="inputxt" id="kpTicket.startStation" /></td>
                            <td align="center" class="labelColumn">到站<span style="color:red">*</span></td>
                            <td align="center">
                        <input name="kpTicket.endStation" type="text" class="inputxt" id="kpTicket.endStation"/></td>
                            <td align="center" class="labelColumn">中轉站</td>
                            <td align="center">
                        <input name="kpTicket.transitStation" type="text" class="inputxt" id="kpTicket.transitStation"/></td>
                            <td align="center" class="labelColumn">里程(公里)<span style="color:red">*</span></td>
                            <td align="center">
                            <input name="kpTicket.milage" type="text" class="inputxt easyui-numberbox" id="kpTicket.milage" data-options="required:true" onBlur="checkMilage();"/>
                            </td>
          </tr>
                    <tr>
                            <td height="26" align="center" class="labelColumn">席別<span style="color:red">*</span></td>
                            <td align="center">
                            <input name="kpTicket.seat" type="text" class="inputxt" id="kpTicket.seat" 
                                data-options="required:true"/>
                                    <!--席別的類型(用來判斷鋪別，不用提交)-->
                                    <input name="banq" type="hidden" id="banq"/>
                            </td>
                            <td align="center" class="labelColumn">鋪別</td>
                            <td align="center">
                            <input name="kpTicket.bed" id="kpTicket.bed" class="inputxt" disabled="disabled" />
                            </td>
                            <td align="center" class="labelColumn">空調類型<span style="color:red">*</span></td>
                            <td align="center">
                            <input name="kpTicket.air" type="text" class="inputxt" id="kpTicket.air"/></td>
                            <td align="center" class="labelColumn">加快類型</td>
                            <td align="center">
                            <input name="kpTicket.baseFast" id="kpTicket.baseFast" class="inputxt"/>
                            </td>
          </tr>
        </table>
      
  </div>
  <!--表頭 end-->
  
    <!-- 表體 -->
    <div class="easyui-layout" data-options="" style="clear:both;background:#ccc;width:auto;height:460px;margin-top:5px;">
        <!-- 左邊表體 -->
        <div data-options="region:'center'" title="子表錄入" style="width:auto;">
            <!-- 嵌套布局 -->
            <div class="easyui-layout" data-options="fit:true">
                
                <div id="PersonDiv" data-options="region:'center',border:false" style="">
                    <!-- 子表1 -->
                    <table id="personTable" class="easyui-datagrid" title-notshow="旅客錄入" 
                        data-options="fit:true,fitColumns:true,border:false,singleSelect:true,
                                    toolbar:'#personTable-toolbar',rownumbers:false,
                                    checkOnSelect:true,selectOnCheck:true,showFooter:true,
                                    onClickRow: onClickPersonRow ">
                        <thead>
                            <tr>
                                <!--子表主鍵-->
                                <th data-options="field:'pid',hidden:true">
                                <th data-options="field:'ck',checkbox:true"></th>
                                <th data-options="field:'kpTicketPersonList.ntype',width:1,
                                    formatter:function(value,row){
                                        return row.name;
                                    },
                                    editor:{
                                        type:'combobox',
                                        options:{
                                            valueField:'id',
                                            textField:'name',
                                            url:'http://www.cnblogs.com/ks_common_json/ksCommon-findPassengerType.action',
                                            required:true
                                        }
                                    }"
                                    >旅客類型</th>
                                <th data-options="field:'kpTicketPersonList.quantity',width:1,
                                    editor:{type:'numberbox'}">人數</th>
                            </tr>
                        </thead>
                    </table>
                    <div id="personTable-toolbar">
                        <span>旅客錄入:</span>
                        <a href="#" class="easyui-linkbutton" accesskey="A" onClick="addPersonRow();">增行(A)</a>
                        <a href="#" class="easyui-linkbutton" accesskey="D" onClick="delPersonRow();">刪行(D)</a>
                    </div>
                </div>
                
                <div id="subjectDiv" data-options="region:'east',split:true,border:false" style="width:240px;">
                    <!-- 子表2 -->
                    <table id="subjectTable" class="easyui-datagrid" title-notshow="科目錄入" 
                        data-options="fit:true,fitColumns:true,border:false,singleSelect:true,
                                    toolbar:'#subjectTable-toolbar',rownumbers:false,
                                    checkOnSelect:true,selectOnCheck:true,showFooter:true,
                                    onClickRow: onClickSubjectRow ">
                        <thead>
                            <tr>
                                <!--子表主鍵-->
                                <th data-options="field:'pid',hidden:true">
                                <th data-options="field:'ck',checkbox:true"></th>
                                <th data-options="field:'kpTicketPriceList.ntype',width:1,
                                    formatter:function(value,row){
                                        return row.name + '['+row.id+']';
                                    },
                                    editor:{
                                        type:'combobox',
                                        options:{
                                            valueField:'id',
                                            textField:'name',
                                            url:'http://www.cnblogs.com/ks_common_json/ksCommon-findSubject.action?ticketTypeId=1',
                                            required:true
                                        }
                                    }">費用科目</th>
                                <th data-options="field:'kpTicketPriceList.amount',width:1,
                                    editor:{
                                        type:'numberbox',
                                        options:{precision:2}
                                    }"
                                    onBlur="checkAmounts(this);" value="0.00">金額(元)</th>
                            </tr>
                        </thead>
                    </table>
                    <div id="subjectTable-toolbar" style="">
                        <span>科目錄入:</span>
                        <a href="#" class="easyui-linkbutton" accesskey="W" onClick="addSubjectRow();">增行(W)</a>
                        <a href="#" class="easyui-linkbutton" accesskey="E" onClick="delSubjectRow();">刪行(E)</a>
                    </div>
                </div>
            </div> <!-- 嵌套布局 end -->
        </div>
        
        <!-- 右邊表體 -->
        <div data-options="region:'east',split:true" title='代用票錄入' style="width:410px;">
            <!-- 嵌套布局 -->
            <div class="easyui-layout" data-options="fit:true">
                <div id="seatDiv" data-options="region:'center',border:false">
                    <!-- 右邊表1 -->
                    <table id="seatTable" class="easyui-datagrid " title-notshow="席別計費" 
                        data-options="fit:true,fitColumns:true,border:false,singleSelect:true,
                                toolbar:'#seatTable-toolbar',rownumbers:true,showFooter:true,
                                onClickRow: onClickSeatRow ">
                        <thead>
                            <tr>
                                <!--隱藏域 席別-->
                                <input name="kpTicketSeatList[0].seatId" type="hidden" />
                                <!--隱藏域 席別類型[硬卧，軟卧]-->
                                <input name="kpTicketSeatList[0].banq" type="hidden" />
                                <!--隱藏域 鋪別 -->
                                <input name="kpTicketSeatList[0].bedName" type="hidden" />
                                <th data-options="field:'ck',checkbox:true"></th>
                                <th data-options="field:'kpTicketSeatList.seatId',width:20,
                                    editor:{type:'text'}">席別</th>
                                <th data-options="field:'kpTicketSeatList.bedId',width:20,editor:{type:'text'}" 
                                    onChange="setBedName(this);">卧鋪鋪別</th>
                                <th data-options="field:'kpTicketSeatList.personQuantity',width:20,
                                    editor:{type:'text'}" onBlur="checkPersons(this);" value="1">人數</th>
                                <th data-options="field:'kpTicketSeatList.price',width:20,editor:{type:'text'}" 
                                    readonly="readonly">單價</th>
                                <th data-options="field:'kpTicketSeatList.total',width:20,editor:{type:'text'}" 
                                    readonly="readonly">總價</th>
                            </tr>
                        </thead>
                    </table>
                    <div id="seatTable-toolbar" style="">
                        <span style="margin-right:10px;">席別計費:</span>
                        <a href="#" class="easyui-linkbutton" onClick="addSeatRow();">增行</a>
                        <a href="#" class="easyui-linkbutton" onClick="delSeatRow();">刪行</a>
                        <a href="#" class="easyui-linkbutton" onClick="calcSeatPrice();">計費</a>
                        <!--卧鋪鋪別-->
                        <select name="kpTicketSeatList[0].bedId" class="inputxt" onChange="setBedName(this);">
                            <option value="" selected="selected"> </option>
                            <option value="1">上鋪</option>
                            <option value="2">中鋪</option>
                            <option value="3">下鋪</option>
                        </select>
                    </div>
                </div>
                
                <div id="costDiv" data-options="region:'south',split:true,border:false" style="height:200px;">
                    <!-- 右邊表2 -->
                    <table id="costTable" class="easyui-datagrid" title-noshow="科目票價"
                        data-options="fit:true,fitColumns:true,border:false,singleSelect:true,
                                    toolbar:'#costTable-toolbar',rownumbers:true,showFooter:true">
                        <thead>
                            <tr>
                                <th data-options="field:'costList.costCode',width:1">科目</th>
                                <th data-options="field:'costList.costPrice',width:1">單價</th>
                            </tr>
                        </thead>
                    </table>
                    <div id="costTable-toolbar">
                        <table width="100%" border="0" cellpadding="0" cellspacing="0" >
                            <tr>
                              <td width="20%" height="26">&nbsp;科目票價：</td>
                              <td height="26" align="center">顯示方式:
                                <select name="costShowType" id="costShowType" onChange="fillCostTableByShowType();">
                                  <option value="1" selected="selected">明細科目</option>
                                  <option value="2">匯總科目</option>
                              </select></td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 表體 end -->
    
</form>
</div> <!-- end container -->

  </body>
</html>

tag.js：

//datagrid官方示例
//var editIndex = undefined;
//function endEditing(){
//    if (editIndex == undefined){return true}
//    if ($('#dg').datagrid('validateRow', editIndex)){
//        var ed = $('#dg').datagrid('getEditor', {index:editIndex,field:'productid'});
//        var productname = $(ed.target).combobox('getText');
//        $('#dg').datagrid('getRows')[editIndex]['productname'] = productname;
//        $('#dg').datagrid('endEdit', editIndex);
//        editIndex = undefined;
//        return true;
//    } else {
//        return false;
//    }
//}
//function onClickRow(index){
//    if (editIndex != index){
//        if (endEditing()){
//            $('#dg').datagrid('selectRow', index)
//                    .datagrid('beginEdit', index);
//            editIndex = index;
//        } else {
//            $('#dg').datagrid('selectRow', editIndex);
//        }
//    }
//}
//function append(){
//    if (endEditing()){
//        $('#dg').datagrid('appendRow',{status:'P'});
//        editIndex = $('#dg').datagrid('getRows').length-1;
//        $('#dg').datagrid('selectRow', editIndex)
//                .datagrid('beginEdit', editIndex);
//    }
//}
//function remove(){
//    if (editIndex == undefined){return}
//    $('#dg').datagrid('cancelEdit', editIndex)
//            .datagrid('deleteRow', editIndex);
//    editIndex = undefined;
//}
//function accept(){
//    if (endEditing()){
//        $('#dg').datagrid('acceptChanges');
//    }
//}
//function reject(){
//    $('#dg').datagrid('rejectChanges');
//    editIndex = undefined;
//}
//function getChanges(){
//    var rows = $('#dg').datagrid('getChanges');
//    alert(rows.length+' rows are changed!');
//}
//////////////////////////////////////////////////


////////////////////////////////
//功能按鈕組
////////////////////////////////
//提交表單
function submitForm(){
    $('#ticketForm').form('submit');
}
//清除表單數據
function clearForm(){
    $('#ticketForm').form('clear');
}
//重置表單.
function resetForm(){
    clearForm();
    
}
//從表單返回
function cancelForm(){
    parent.Ext.getCmp('cs4window').close();
}

////////////////////////////////
//日期控件格式
////////////////////////////////
$.fn.datebox.defaults.formatter = function(date){
    var y = date.getFullYear();
    var m = date.getMonth()+1;
    var d = date.getDate();
    return y+'-'+m+'-'+d;
}
////////////////////////////////


////旅客表工具條設置////
var personEditIndex = undefined;
//設置下拉框的值，並顯示文本
function endPersonEditing(){
    if (personEditIndex == undefined){return true}
    if ($('#personTable').datagrid('validateRow', personEditIndex)){
        $('#personTable').datagrid('endEdit', personEditIndex);
        personEditIndex = undefined;
        return true;
    } else {
        return false;
    }
}
function onClickPersonRow(index){
    if (personEditIndex != index){
        if (endPersonEditing()){
            $('#personTable').datagrid('selectRow', index)
                    .datagrid('beginEdit', index);
            personEditIndex = index;
        } else {
            $('#personTable').datagrid('selectRow', personEditIndex);
        }
    }
}
function addPersonRow(){
    if (endPersonEditing()){
        $('#personTable').datagrid('appendRow',{});
        personEditIndex = $('#personTable').datagrid('getRows').length-1;
        $('#personTable').datagrid('selectRow', personEditIndex)
                .datagrid('beginEdit', personEditIndex);
    }
}

function delPersonRow(){
    if (personEditIndex == undefined){return}
    $('#personTable').datagrid('cancelEdit', personEditIndex)
            .datagrid('deleteRow', personEditIndex);
    personEditIndex = undefined;
}

////科目表工具條設置////
var subjectEditIndex = undefined;
function endSubjectEditing(){
    if (subjectEditIndex == undefined){return true}
    if ($('#subjectTable').datagrid('validateRow', subjectEditIndex)){
        $('#subjectTable').datagrid('endEdit', subjectEditIndex);
        subjectEditIndex = undefined;
        return true;
    } else {
        return false;
    }
}
function onClickSubjectRow(index){
    if (subjectEditIndex != index){
        if (endSubjectEditing()){
            $('#subjectTable').datagrid('selectRow', index)
                    .datagrid('beginEdit', index);
            subjectEditIndex = index;
        } else {
            $('#subjectTable').datagrid('selectRow', subjectEditIndex);
        }
    }
}
function addSubjectRow(){
    if (endSubjectEditing()){
        $('#subjectTable').datagrid('appendRow',{});
        subjectEditIndex = $('#subjectTable').datagrid('getRows').length-1;
        $('#subjectTable').datagrid('selectRow', subjectEditIndex)
                .datagrid('beginEdit', subjectEditIndex);
    }
}
function delSubjectRow(){
    if (subjectEditIndex == undefined){return}
    $('#subjectTable').datagrid('cancelEdit', subjectEditIndex)
            .datagrid('deleteRow', subjectEditIndex);
    subjectEditIndex = undefined;
}

////席別計費工具條設置////
var seatEditIndex = undefined;
function endSeatEditing(){
    if (seatEditIndex == undefined){return true}
    if ($('#seatTable').datagrid('validateRow', seatEditIndex)){
        $('#seatTable').datagrid('endEdit', seatEditIndex);
        seatEditIndex = undefined;
        return true;
    } else {
        return false;
    }
}
function onClickSeatRow(index){
    if (seatEditIndex != index){
        if (endSeatEditing()){
            $('#seatTable').datagrid('selectRow', index)
                    .datagrid('beginEdit', index);
            seatEditIndex = index;
        } else {
            $('#seatTable').datagrid('selectRow', seatEditIndex);
        }
    }
}
function addSeatRow(){
    if (endSeatEditing()){
        $('#seatTable').datagrid('appendRow',{});
        seatEditIndex = $('#seatTable').datagrid('getRows').length-1;
        $('#seatTable').datagrid('selectRow', seatEditIndex)
                        .datagrid('beginEdit', seatEditIndex);
    }
}
function delSeatRow(){
    if (seatEditIndex == undefined){return}
    $('#seatTable').datagrid('cancelEdit', seatEditIndex)
                    .datagrid('deleteRow', seatEditIndex);
    seatEditIndex = undefined;
}


////////////////////////
//下拉框數據源定義
////////////////////////
$(function(){
    
    
    
    //擴展combobox的方法,獲取輸入框文本
    //使用示例：var text = $("#comboboxId").combobox("getText");
    $.extend({},$.fn.combobox.methods,{
        getText:function(jq){
            return $(jq).data('combo').combo.find("input.combo-text").val();
        }
    });
    //自定義combobox的默認屬性與方法處理
    var ksComboboxOpts = $.extend({},$.fn.combobox.defaults,{
        valueField: 'id',
        textField: 'name',
        mode : 'remote',    //remote or local 數據源默認使用遠程模式
        required: false,
        width: 120,
        keyHandler: {
            up: function(){
                //selectPrev(this);
                $.fn.combobox.defaults.keyHandler.up.call(this);
            },
            down: function(){
                //selectNext(this);
                $.fn.combobox.defaults.keyHandler.down.call(this);
                $(this).combobox('showPanel');
            },
            enter: function(){
                //var values = $(this).combobox('getValues');
                //$(this).combobox('setValues', values);
                //$(this).combobox('hidePanel');
                $.fn.combobox.defaults.keyHandler.enter.call(this);
            },
            query: function(q){
                //doQuery(this, q);
                $.fn.combobox.defaults.keyHandler.query.call(this,q);
            }
        },
        //覆蓋combobox的filter
        filter : function(q, row){
            var opts = $(this).combobox('options');
            return row[opts.textField].indexOf(q) == 0 || row['id'].indexOf(q)==0;
        },
        //覆蓋combobox的formatter
        formatter : function(row){
            var opts = $(this).combobox('options');
            var itemStr = "";
            if( row[opts.valueField] ){
                 itemStr = row[opts.textField]+ "["+row[opts.valueField]+"]";
            }
            return "<a value=\"" +row[opts.valueField]+ "\" style=\"height:20px;display:block;\">" + itemStr+ "</a>";
        },
        loader: function(param, success, error){
            var opts = $(this).combobox('options');
            if (!opts.url) return false;
            $.ajax({
                type: opts.method,
                url: opts.url,
                data: param,
                dataType: 'json',
                success: function(data){
                    success(data);
                },
                error: function(){
                    error.apply(this, arguments);
                }
            });
        },
        //覆蓋combobox的onBeforeLoad,輸入2個字符后才加載
        onBeforeLoad : function(param){
            var q = param.q || "";
            q = q.toUpperCase();
            if( q.length<2) return false; 
        },
        onLoadSuccess : function(data){
            var q = $(this).data('q');
            if($(this).data('cacheData')){
                $(this).data('cacheData')[q] = q;
            }
        },
        onLoadError: function(){},
        onSelect: function(record){},
        onUnselect: function(record){}
    });
    
    //有選擇的覆蓋默認的combobox屬性
    $.extend($.fn.combobox.defaults,{
        valueField: ksComboboxOpts.valueField,
        textField: ksComboboxOpts.textField,
        //keyHandler: ksComboboxOpts.keyHandler,//不能覆蓋,會循環調用
        filter: ksComboboxOpts.filter,
        formatter: ksComboboxOpts.formatter,
        loader:ksComboboxOpts.loader,
        onBeforeLoad:ksComboboxOpts.onBeforeLoad,
        onLoadSuccess:ksComboboxOpts.onLoadSuccess
    });
    
    //發站combobox定義
    $("input[id='kpTicket.startStation']").combobox({
        required:true,
        mode:'remote',
        url: 'http://www.cnblogs.com/ks_common_json/ksCommon-findStation.action',
        valueField:'id',
        textField:'name',
        filter: ksComboboxOpts.filter,
        formatter: ksComboboxOpts.formatter,
        onBeforeLoad:ksComboboxOpts.onBeforeLoad,
        onLoadSuccess:ksComboboxOpts.onLoadSuccess
        
    });
    //到站combobox定義
    $("input[id='kpTicket.endStation']").combobox({
        required:true,
        mode:'remote',
        url: 'http://www.cnblogs.com/ks_common_json/ksCommon-findStation.action',
        valueField:'id',
        textField:'name',
        formatter: ksComboboxOpts.formatter,
        filter: ksComboboxOpts.filter,
        onBeforeLoad:ksComboboxOpts.onBeforeLoad,
        onLoadSuccess:ksComboboxOpts.onLoadSuccess
    });
    //中轉站combobox定義
    $("input[id='kpTicket.transitStation']").combobox({
        required:false,
        mode:'remote',
        url: 'http://www.cnblogs.com/ks_common_json/ksCommon-findStation.action',
        valueField:'id',
        textField:'name',
        formatter: ksComboboxOpts.formatter,
        filter: ksComboboxOpts.filter,
        onBeforeLoad:ksComboboxOpts.onBeforeLoad,
        onLoadSuccess:ksComboboxOpts.onLoadSuccess
    });
    
    //席別combobox定義
    $.ajax({
        type: "POST",
        dataType:'json',
        url: "http://www.cnblogs.com/ks_common_json/ksCommon-findBanquet.action",
        data: "",
        success: function(jsonData){
            var $seat = $("input[id='kpTicket.seat']");
            $seat.combobox({
                data: jsonData,//json格式的數據
                required:true,
                mode:'local', // local or remote
                //url: "http://www.cnblogs.com/ks_common_json/ksCommon-findBanquet.action",
                valueField: 'id',
                textField: 'name',
                formatter: ksComboboxOpts.formatter,
                filter: ksComboboxOpts.filter,
                loader:ksComboboxOpts.loader,
                //onBeforeLoad:ksComboboxOpts.onBeforeLoad,
                //onLoadSuccess:ksComboboxOpts.onLoadSuccess,
                onSelect: function(record){  
                    var id = record.id; 
                    var banq = record.banq;
                    var bed = $("input[id='kpTicket.bed']");
                    //$("input[id='banq']").val(record.banq);        //席別的類型(用來判斷鋪別)
                    if( banq=="硬卧" || banq=='軟卧' ){
                        bed.combobox('enable');
                    }else{
                        //bed.combobox('setValue',"");
                        bed.combobox('disable');
                    }
                    
                    //設置鋪別的option元素
                    //initBedOptions(banq,$("input[id='kpTicket.bed']"));
                }
            });
            //綁定focus事件
            $seat.data('combo').combo.find('.combo-text')
            .bind('focus',function(){
                $seat.combobox('showPanel');
            });
        }
    });
    
    //鋪別
    var bedData=[{id:"",name:""},{id:"1",name:"上鋪"},{id:"2",name:"中鋪"},{id:"3",name:"下鋪"}];
    $("input[id='kpTicket.bed']").combobox({
        width: 120,
        data: bedData,
        mode: 'local',
        valueField: 'id',
        textField: 'name',
        formatter: ksComboboxOpts.formatter,
        filter: function(q, row){
            var opts = $(this).combobox('options');
            var banq = $("input[id='kpTicket.seat']").combobox('getData').banq;
            
            if( banq=="硬卧"){
                //硬卧才有上中下
                return row[opts.textField].indexOf(q) == 0;
            }else if( banq=='軟卧' ){
                return row[opts.textField].indexOf(q) == 0 && row[opts.textField] != '2';
            }
        }
    });
    //綁定focus事件
    bindComboboxFocus($("input[id='kpTicket.bed']"));
    
    //空調類型
    $("input[id='kpTicket.air']").combobox({
        //data: jsonData,//json格式的數據
        required:true,
        mode:'remote',
        url: "http://www.cnblogs.com/ks_common_json/ksCommon-findAcLevel.action",
        valueField: 'id',
        textField: 'name',
        formatter: ksComboboxOpts.formatter,
        filter: ksComboboxOpts.filter,
        loader:ksComboboxOpts.loader,
        //onBeforeLoad:ksComboboxOpts.onBeforeLoad,
        onLoadSuccess:ksComboboxOpts.onLoadSuccess
    });
    //綁定focus事件
    var $air = $("input[id='kpTicket.air']");
    $air.data('combo').combo.find('.combo-text')
    .bind('focus',function(){
        $air.combobox('showPanel');
    });
    
    //加快類型
    $("input[id='kpTicket.baseFast']").combobox({
        mode:'local',
        data:[{id:'',name:'==請選擇=='},{id:'0',name:'普快'},{id:'1',name:'普客'}],
        valueField: 'id',
        textField: 'name',
        editable: false,
        width:115,
        keyHandler:ksComboboxOpts.keyHandler
    });
    //綁定focus事件
    var $baseFast = $("input[id='kpTicket.baseFast']");
    $baseFast.data('combo').combo.find('.combo-text')
    .bind('focus',function(){
        $baseFast.combobox('showPanel');
    });

    /*************事件注入開始************/
    //綁定獲取焦點時自動選擇文本
    $('input:enabled').focus(function(){
        this.select();
    });
/*************事件注入結束************/
    
}); //jquery end
//綁定combobox的focus事件
function bindComboboxFocus(jq){
    $(jq).data('combo').combo.find('.combo-text')
    .bind('focus',function(){
        $(jq).combobox('showPanel');
    });
}

效果圖如下：
由於刪除部分function，點擊某些按鈕時會有錯誤，但不影響效果