使用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="" 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 ;
},
editor:{
type:'combobox',
options:{
valueField:'id',
textField:'name',
url:'',
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 + '['++']';
},
editor:{
type:'combobox',
options:{
valueField:'id',
textField:'name',
url:'',
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: '',
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: '',
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: '',
valueField:'id',
textField:'name',
formatter: ksComboboxOpts.formatter,
filter: ksComboboxOpts.filter,
onBeforeLoad:ksComboboxOpts.onBeforeLoad,
onLoadSuccess:ksComboboxOpts.onLoadSuccess
});
//席别combobox定义
$.ajax({
type: "POST",
dataType:'json',
url: "",
data: "",
success: function(jsonData){
var $seat = $("input[id='kpTicket.seat']");
$seat.combobox({
data: jsonData,//json格式的数据
required:true,
mode:'local', // local or remote
//url: "",
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: "",
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，点击某些按钮时会有错误，但不影响效果
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
