combobox效果图
textbox效果图
引入公共文件datagridEdit.js
这个公共文件中定义了editCell方法
var gridEdit={
init:function(){
$.extend($.fn.datagrid.methods, {
editCell: function(jq,param){
return jq.each(function(){
var opts = $(this).datagrid('options');
var fields = $(this).datagrid('getColumnFields',true).concat($(this).datagrid('getColumnFields'));
for(var i=0; i生成datagrid
datagrid:function(){
zbsjbj.editRow = undefined;//刷新表格的时候将修改行号置空
var dyColumns = [];//从库里查出来表格的各列
$.ajax({
url:"queryRoadTargetsByTableName.action",
type:"post",
data:{
"roadTargets.tableName":zbManage.zbMap.tableName
},
success:function(data){
if(data.res.status==1){
//console.log(data);
$.each(data.res.obj.list, function(i, item){//遍历表格的各列
var oneC = {};
if(item.fieldName=='ROADSTART'){
oneC['field']="ROADSTARTTEXT";
}else if(item.fieldName=='ROADENDS'){
oneC['field']="ROADENDSTEXT";
}else{
oneC['field']=item.fieldName;
}
oneC['field']==""?"ROADSTARTTEXT":item.fieldName;
oneC['title']=item.fieldMean;
oneC['width']=100;
oneC['align']='center';
if(item.fieldName!='ROADCODE' && item.fieldName!='ROADNAME' && item.fieldName!='ROADSTART'&&item.fieldName!='ROADENDS'){
if(item.fieldType=='08'||item.fieldType==8){
oneC['editor']={//定义combobox的editor
type:'combobox',
options:{
valueField:'ID',
textField:'TEXT',
data: data.res.obj[item.enumStr],//这个data是从库里查出来的
}
};
//添加format方法
oneC['formatter']= function(value,row,index){
return getTextById(data.res.obj[item.enumStr],value);
};
}else{
//textbox方法
oneC['editor']='textbox';
}
}
dyColumns.push(oneC);
});
$('#datagrid').datagrid({
url : "zbsjbjQueryForPage.action",
queryParams : {
"id":zbManage.zbMap.id,
"roadCode":lxTree.roadCode
},
loadMsg : '正在加载数据...',
pageNumber:1,
singleSelect: true,
fit : true,
fitColumns:true,
border : true,
rownumbers : true,
pagination : true,
striped : true,
onLoadSuccess:function(data){
$("#datagrid").datagrid("resize");
},
columns : new Array(dyColumns)
,onClickRow:function(index,field,value){//单击，停止编辑
zbsjbj.endEditing(field);
}
//单元格编辑事件开始
,onDblClickCell:function(index,field,value){//双击，开始编辑
if (zbsjbj.endEditing(field)){
if(field=='ROADCODE' || field=='ROADSTARTTEXT' || field=='ROADENDSTEXT' || field=='ROADPOSTEXT'){//如果是这种类型，显示一个弹窗
zbsjbj.rowIndex = index;
zbsjbj.showUpWin();
}else{//在datagrid中进行编辑
$("#datagrid").datagrid("acceptChanges");//在edit之前要接受上一次的修改内容，否则如果这一次的修改出现了异常，会将前面所有的修改操作都撤销（当前这种撤销是前端页面显示上的撤销）。
$('#datagrid').datagrid('selectRow', index).datagrid('editCell', {index:index,field:field});
zbsjbj.editIndex = index;
}
}
}
,onEndEdit:function(index,row,changes){//结束编辑，如果内容有变化的话，那么ajax后台修改
var change = false;
//console.log(row);
//console.log(changes);
for(x in changes){
change = true;
break;
}
if(change){
zbsjbj.saveChanges(row,changes);
}
}
//单元格编辑事件结束
});
}else{
alert("查询指标字段出现异常！");
}
},
error:function(request,state,e){
alert("查询指标字段出现异常！");
}
});
}
,endEditing:function(field){//结束编辑
if (zbsjbj.editIndex == undefined){return true}
if ($('#datagrid').datagrid('validateRow', zbsjbj.editIndex)){
$('#datagrid').datagrid('endEdit', zbsjbj.editIndex);
zbsjbj.editIndex = undefined;
return true;
} else {
return false;
}
}
,saveChanges:function(row,changes){//保存变化
//console.log(row);
//console.log(changes);
var f;
var v;
for(var x in changes){
f = x;
v = changes[x];
break;
}
__showMask("正在保存修改内容！");
$.ajax({
url:"zbsjbcUpData.action",
traditional: true,
data:{
"id":row.ID,
"t":zbManage.zbMap.tableName,
"f":f,
"v":v,
"tableType":zbManage.zbMap.tableType,
"lineType":zbManage.zbMap.lineType
},
type:"post",
success:function(data){
if(data.res.status==1){
}else{
$("#datagrid").datagrid("rejectChanges");
alert(data.res.msg);
}
__closeMask();
},
error:function(request,status,e){
alert("保存修改信息出现异常！");
__closeMask();
}
});
}
combobox根据id获取显示内容
function getTextById(arr,id){
var text = "";
try{
$.each(arr,function(i,item){
if(item.ID==id){
text = item.TEXT;
return false;
}
//因为datasys中数据有01这种，而01和1判断不相等，所以转换成int比较
try{
if(parseInt(item.ID)==parseInt(id)){
text = item.TEXT;
return false;
}
}catch(e){
}
});
}catch(Exception){
}
return text;
}
后台查询的combox的data
var isNullMap = [
{'ID':0,'TEXT':'否'},
{'ID':1,'TEXT':'是'},
]
后台查询表格的各列
public Map queryRoadTargetsByTableName(RoadTargets rts) throws Exception{
Map resMap = new HashMap();
//查询各列
String sql = "select id,fieldname,fieldmean,FIELDTYPE,enum from roadtargets where tablename=? order by showindex asc";
List rtL = jdbcTemplate.query(sql, new Object[]{rts.getTableName()}, new RowMapper(){
public Object mapRow(ResultSet rs, int i) throws SQLException {
RoadTargets rts = new RoadTargets();
rts.setId(rs.getLong("id"));
rts.setFieldName(rs.getString("fieldname"));
rts.setFieldMean(rs.getString("fieldmean"));
rts.setFieldType(rs.getString("FIELDTYPE"));
rts.setEnumStr(rs.getString("enum"));
return rts;
}
});
resMap.put("list", rtL);
List enumList;
Map nullMap = new HashMap(){{put("ID","");put("TEXT","请选择");}};
for(RoadTargets rtTemp : rtL){
//如果这一列是combobox类型的话，那么从库中查询所有的option项，然后扔到一个map中
if((rtTemp.getFieldType().equals("08") || rtTemp.getFieldType().equals("8")) && rtTemp.getEnumStr().length()>0){
sql = "select code ID,codemean TEXT from enuminfo where enumname=? order by showindex asc";
enumList = jdbcTemplate.queryForList(sql, rtTemp.getEnumStr());
enumList.add(0, nullMap);
resMap.put(rtTemp.getEnumStr(), enumList);
}
}
return resMap;
}
后台返回数据
{"res":{"msg":"操作成功","obj":{"list":[{"bmDef":null,"enumStr":null,"fieldDes":null,"fieldLen":null,"fieldMean":"路线编码","fieldName":"ROADCODE","fieldType":"02","id":68,"isNull":null,"issys":null,"showIndex":null,"state":null,"tableName":null,"unit":null},{"bmDef":null,"enumStr":null,"fieldDes":null,"fieldLen":null,"fieldMean":"路线名称","fieldName":"ROADNAME","fieldType":"02","id":69,"isNull":null,"issys":null,"showIndex":null,"state":null,"tableName":null,"unit":null},{"bmDef":null,"enumStr":null,"fieldDes":null,"fieldLen":null,"fieldMean":"起点桩号","fieldName":"ROADSTART","fieldType":"07","id":70,"isNull":null,"issys":null,"showIndex":null,"state":null,"tableName":null,"unit":null},{"bmDef":null,"enumStr":null,"fieldDes":null,"fieldLen":null,"fieldMean":"止点桩号","fieldName":"ROADENDS","fieldType":"07","id":71,"isNull":null,"issys":null,"showIndex":null,"state":null,"tableName":null,"unit":null},{"bmDef":null,"enumStr":"公路技术等级代码","fieldDes":null,"fieldLen":null,"fieldMean":"技术等级","fieldName":"JSDJ","fieldType":"08","id":72,"isNull":null,"issys":null,"showIndex":null,"state":null,"tableName":null,"unit":null}],"公路技术等级代码":[{"TEXT":"请选择","ID":""},{"ID":"10","TEXT":"高速"},{"ID":"11","TEXT":"一级"},{"ID":"12","TEXT":"二级"},{"ID":"13","TEXT":"三级"},{"ID":"14","TEXT":"四级"},{"ID":"30","TEXT":"等外公路"}]},"status":1}}
进一步要求（combobox选中一项之后立马自动提交）
我对上面的editor做了下面的修改：
oneC['editor']={
type:'combobox',
options:{
editable:false,
valueField:'ID',
textField:'TEXT',
data: data.res.obj[item.enumStr],
onSelect:function(record){
//console.log(record);
zbsjbj.endEditing();
}
}
};
上面的修改能够自动完成提交，但是控制台一直报一个panel找不到的错误，猜测是因为点击之后立马进行关闭combobox导致的，所以这里改成延时500ms。
修改上面的onSelect：
oneC['editor']={
type:'combobox',
options:{
editable:false,
valueField:'ID',
textField:'TEXT',
data: data.res.obj[item.enumStr],
onSelect:function(record){
//console.log(record);
window.setTimeout(zbsjbj.endEditing,500);
}
}
};
进一步要求（text回车提交）
解决思路，每次开始编辑之后，在editor对象上绑定keyup事件。
$('#datagrid').datagrid('selectRow', index).datagrid('editCell', {index:index,field:field});
var ed = $('#datagrid').datagrid('getEditor', {index:index,field:field});
$(ed.target).bind('keyup', function() {
if (window.event.keyCode == 13) {
window.setTimeout(zbsjbj.endEditing,500);
}
});
进一步要求（text开始编辑的时候获取焦点）
我的解决办法是这样的，我的editor的type是text，这样就可以获取到焦点。
$('#datagrid').datagrid('selectRow', index).datagrid('editCell', {index:index,field:field});
var ed = $('#datagrid').datagrid('getEditor', {index:index,field:field});
$(ed.target).focus();
如果，editor的type是textbox，那么直接$(ed.target).focus();是获取不到焦点的，需要这么处理（官网的demo就是这样的）：
var ed = $(this).datagrid('getEditor', param);
if (ed){
if ($(ed.target).hasClass('textbox-f')){
$(ed.target).textbox('textbox').focus();
} else {
$(ed.target).focus();
}
}