EasyUi 行编辑，失去焦点，下拉框显示ID，不显示名称
easyui 的行编辑，我使用4级联动下拉框，只是选好值，失去焦点结束编辑的时候，不显示名称，显示的为ID，找了好久，不知道为啥，在线求救。。。
<%@ page language="java" contentType="text/html; charset=gbk"
pageEncoding="gbk"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<base href="<%=basePath%>">
<meta http-equiv="Content-Type" content="text/html; charset=gbk">
<title>人员信息管理</title>
<link rel="stylesheet" type="text/css" href="js/jquery-easyui-1.4.5/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="js/jquery-easyui-1.4.5/themes/icon.css">
<link rel="stylesheet" type="text/css" href="js/jquery-easyui-1.4.5/demo.css">
<script type="text/javascript" src="js/jquery-easyui-1.4.5/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery-easyui-1.4.5/jquery.easyui.min.js"></script>
<script type="text/javascript" src="js/tjjs/FusionCharts/FusionCharts.js"></script>
<script type="text/javascript" src="js/jquery-easyui-1.4.5/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" src="js/ydCommon.js"></script>
<%
String xm = (String)session.getAttribute("oaryxm")==null?"":(String)session.getAttribute("oaryxm");
%>
<script type="text/javascript">
$(function(){
//设置配件包名
$("#packAge").combobox({
panelHeight: "auto",
url:"servlet/FitAction?method=queryResult&parentId=0",
editable: false,
valueField: "id",
textField: "name",
editable : true,
onLoadSuccess: function () {
//加载完成后,设置选中第一项
var val = $(this).combobox("getData");
for (var item in val[0]) {
if (item == "id") {
$(this).combobox("select", val[0][item]);
}
}
},
onChange: function () {
//更新下一级列表
$("#cateCory").combobox("reload", "servlet/FitAction?method=queryResult&parentId=" + $(this).combobox("getValue"));
}
});
//设置配件类别
$("#cateCory").combobox({
panelHeight: "auto",
editable: false,
valueField: "id",
textField: "name",
editable : true,
panelHeight:'200',
onLoadSuccess: function () {
//加载完成后,设置选中第一项
var val = $(this).combobox("getData");
for (var item in val[0]) {
if (item == "id") {
$(this).combobox("select", val[0][item]);
}
}
},
onChange: function () {
//更新市列表
$("#name").combobox("reload", "servlet/FitAction?method=queryResult&parentId=" + $(this).combobox("getValue"));
}
});
//设置配件名称
$("#name").combobox({
panelHeight: "auto",
editable: false,
valueField: "id",
textField: "name",
editable : true,
onLoadSuccess: function () {
//加载完成后,设置选中第一项
var val = $(this).combobox("getData");
for (var item in val[0]) {
if (item == "id") {
$(this).combobox("select", val[0][item]);
}
}
},
onChange: function () {
//更新市列表
$("#size").combobox("reload", "servlet/FitAction?method=queryResult&parentId=" + $(this).combobox("getValue"));
}
});
//配件规格
$("#size").combobox({
panelHeight: "auto",
editable: false,
valueField: "id",
textField: "name",
editable : true,
onLoadSuccess: function () {
//加载完成后,设置选中第一项
var val = $(this).combobox("getData");
for (var item in val[0]) {
if (item == "id") {
$(this).combobox("select", val[0][item]);
}
}
}
});
$("#tt").datagrid({
url:"servlet/FitAction?method=searchProduct",
title:"配件信息列表",
toolbar:"#tb",
striped: true, //交替条纹
rownumbers : true, //显示行数
loadMsg: '正在拼命加载,请稍后...',
fitColumns : true,
singleSelect : false,
onClickRow: onClickRow,
pagination : true,
height : 400,
pageSize : 10, //默认显示几条数据
pageList : [ 5, 10, 15 ], //制定显示几条
columns:[[
{field:"id",title:"id",width:100,checkbox:true},
{field:"packName",title:"包名",width:200,
formatter:function(value,row){
console.info(row);
return row.packName;
},
editor:{
type:'combobox',
options:{
url:'servlet/FitAction?method=queryResult&parentId=0',
valueField:"id",
textField:"name",
required:true,
onSelect:function(data){
var row = $("#tt").datagrid("getSelected");
var rowIndex = $("#tt").datagrid("getRowIndex",row);//获取行号
var thisTarget = $("#tt").datagrid("getEditor", {"index":rowIndex,"field":"packName"}).target;
var value = thisTarget.combobox("getValue");
var target = $("#tt").datagrid("getEditor", {"index":rowIndex,"field":"cateName"}).target;
target.combobox("clear"); //清除原来的数据
var url = "servlet/FitAction?method=queryResult&parentId="+value;
target.combobox("reload", url);//联动下拉列表重载
}
}
}
},
{field:"cateName",title:"类别",width:200,
editor:{
type:"combobox",
options:{
url:'servlet/FitAction?method=queryResult',
valueField:"id",
textField:"name",
required:true,
onSelect:function(data){
var row = $("#tt").datagrid("getSelected");
var rowIndex = $("#tt").datagrid("getRowIndex",row);//获取行号
var thisTarget = $("#tt").datagrid("getEditor", {"index":rowIndex,"field":"cateName"}).target;
var value = thisTarget.combobox("getValue");
var target = $("#tt").datagrid("getEditor", {"index":rowIndex,"field":"productName"}).target;
target.combobox("clear"); //清除原来的数据
var url = "servlet/FitAction?method=queryResult&parentId="+value;
target.combobox("reload", url);//联动下拉列表重载
}
}
}
},
{field:"productName",title:"产品名称",width:200,
formatter:function(value,row){
console.info(row);
return row.productName;
},
editor:{
type:"combobox",
options:{
url:"servlet/FitAction?method=queryResult",
valueField:"id",
textField:"name",
required:true,
onSelect:function(data){
var row = $("#tt").datagrid("getSelected");
var rowIndex = $("#tt").datagrid("getRowIndex",row);//获取行号
var thisTarget = $("#tt").datagrid("getEditor", {"index":rowIndex,"field":"productName"}).target;
var value = thisTarget.combobox("getValue");
var target = $("#tt").datagrid("getEditor", {"index":rowIndex,"field":"sizeName"}).target;
target.combobox("clear"); //清除原来的数据
var url = "servlet/FitAction?method=queryResult&parentId="+value;
target.combobox("reload", url);//联动下拉列表重载
}
}
}
},
{field:"sizeName",title:"规格",width:200,
formatter:function(value,row){
console.info(row);
return row.sizeName;
},
editor:{
type:"combobox",
options:{
valueField:"id",
textField:"name",
method:"get",
url:"servlet/FitAction?method=queryResult",
required:true
}
}
},
{field:"amount",title:"数量",width:200,editor:"numberbox"},
{field:"remark",title:"备注",width:300,editor:"textbox"}
]]
});
/* $('#tt').datagrid('hideColumn', 'id'); */
var p = $('#tt').datagrid('getPager');
$(p).pagination({
pageSize: 10,//每页显示的记录条数，默认为10
pageList: [5,10,15,1000],//可以设置每页记录条数的列表
beforePageText: '第',//页数文本框前显示的汉字
afterPageText: '页 共 {pages} 页',
displayMsg: '当前显示 {from} - {to} 条记录 共 {total} 条记录',
});
//搜索框
$("#doSearch").bind("click", function(){
$("#tt").datagrid("load",{
packAge: $("#packAge").combobox("getValue"),
cateCory:$("#cateCory").combobox("getValue"),
name: $("#name").combobox("getValue"),
size: $("#size").combobox("getValue")
});
});
//删除
$("#delFun").bind("click",function(){
// 得到选中的行
var selRow = $("#tt").datagrid("getSelections");//返回选中多行
if(selRow.length==0){
$.messager.alert('提示', '请至少选择一行数据!',"warning");
return false;
}
var ids=[];
for (var i = 0; i < selRow.length; i++) {
//获取自定义table 的中的checkbox值
var id=selRow[i].id; //OTRECORDID这个是你要在列表中取的单个id
ids.push(id); //然后把单个id循环放到ids的数组中
}
$.messager.confirm('确认','您确认想要删除记录吗？',function(r){
if (r){
$.ajax({
type:'POST',
url:"servlet/FitAction?method=delProduct",
data:{"array[]":ids},
success: function(data){
var data = eval("("+data+")");
if('3'==data){
$.messager.alert('提示', '删除成功!',"info");
$("#tt").datagrid("reload");
}else{
$.messager.alert('提示', '删除失败,请联系管理员！',"error");
}
}
});
}
});
});
});
//点击某一行
var editIndex = undefined;
function endEditing(){
if (editIndex == undefined){return true;}
if ($('#tt').datagrid('validateRow', editIndex)){
var ed = $('#tt').datagrid('getEditor', {index:editIndex,field:'packName'});
var cn= $('#tt').datagrid('getEditor', {index:editIndex,field:'cateName'});
var packName = $(ed.target).combobox('getText');
var cateName=$(cn.target).combobox('getText');
$('#tt').datagrid('getRows')[editIndex]['packName'] = packName;
$('#tt').datagrid('getRows')[editIndex]['cateName'] = cateName;
$('#tt').datagrid('endEdit', editIndex);
editIndex = undefined;
return true;
} else {
return false;
}
}
function onClickRow(index){
if (editIndex != index){
if (endEditing()){
$('#tt').datagrid('selectRow', index)
.datagrid('beginEdit', index);
editIndex = index;
} else {
$('#tt').datagrid('selectRow', editIndex);
}
}
}
function append(){
if (endEditing()){
//1 先取消所有的选中状态
$('#tt').datagrid('unselectAll');
//2追加一行
$('#tt').datagrid('appendRow',{description:''});
//3获取当前页的行号
editing = $('#tt').datagrid('getRows').length -1;
//4选中并开启编辑状态
$('#tt').datagrid('selectRow',editing);
$('#tt').datagrid('beginEdit', editing);
}
}
function removeit(){
if (editIndex == undefined){return}
$('#tt').datagrid('cancelEdit', editIndex)
.datagrid('deleteRow', editIndex);
editIndex = undefined;
}
function accept(){
if (endEditing()){
$('#tt').datagrid('acceptChanges');
}
}
function reject(){
$('#tt').datagrid('rejectChanges');
editIndex = undefined;
}
function getChanges(){
var rows = $('#tt').datagrid('getChanges');
alert(rows.length+' rows are changed!');
}
</script>
<style>
#cxtj tr td{border:solid #add9c0; border-width:1px 1px 1px 1px; padding:3px 0px;}
</style>
</head>
<body>
<table id="tt"></table>
<div id="tb" style="padding:5px;height:auto">
<div style="margin-bottom:5px">
<a href="javascript:void(0)" id="addFun" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="append()">添加</a>
<a href="javascript:void(0)" id="delFun" class="easyui-linkbutton" iconCls="icon-remove" plain="true">删除</a>
<a href="javascript:void(0)" id="saveFun" class="easyui-linkbutton" iconCls="icon-save" plain="true" onclick="accept()">保存</a>
<!-- <a href="javascript:void(0)" id="editFun" class="easyui-linkbutton" iconCls="icon-edit" plain="true">编辑</a> -->
</div>
<div>
包名:<input id="packAge" class="easyui-combobox " name="packAge" />
类别:<input id="cateCory" class="easyui-combobox " name="cateCory" />
名称:<input id="name" class="easyui-combobox " name="name" />
规格:<input id="size" class="easyui-combobox " name="size" />
<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-search" id="doSearch">Search</a>
</div>
</div>
</body>
</html>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（5）
检查有NAME就可以用NAME覆盖显示. { title: "担当", field: "sctdResponsible", align: "center", width: 100, formatter: function (value, row, index) { if (row.NAME) { return row.NAME; } else { return value; } }, editor: { type: 'combobox', options: { valueField: 'STAFF_ID', textField: 'NAME', url: "<%=basePath%>staff/listAll.do", required: true } } }回复
我这还没走到数据库呢，就是结束编辑$('#tt').datagrid('acceptChanges'); 的时候，然后下拉框就回显成了id，不清楚啥情况
回复
formatter不是在editor中写，要写在editor外面，跟editor是同级的，是对列的值进行格式化。{field:"productName",title:"产品名称",width:200, formatter：fun(), xxx} 这里
回复
哦，我这个地方是正常显示的，就是怎么说呢，编辑行不是有开始编辑和结束编辑么？ 技术编辑的时候还没有进行保存操作，这个时候它回显的是value而不是text，这个地方我加了format，但是不起作用
回复
楼主这个问题结局了么:sob: