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"> <input name="saveButton" type="button" id="saveButton" value="保存(S)" accesskey="S"/ onClick="submitForm();"> <input name="resetButton" type="button" id="resetButton" value="重置(R)" accesskey="R" onClick="resetForm();"/> <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"> </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"> 科目票价：</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，点击某些按钮时会有错误，但不影响效果
