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<fields.length; i++){
var col = $(this).datagrid('getColumnOption', fields[i]);
col.editor1 = col.editor;
if (fields[i] != param.field){
col.editor = null;
}
}
$(this).datagrid('beginEdit', param.index);
for(var i=0; i<fields.length; i++){
var col = $(this).datagrid('getColumnOption', fields[i]);
col.editor = col.editor1;
}
});
}
});
}
}
$(function(){
gridEdit.init();
});
生成datagrid
datagrid:function(){
zbsjbj.editRow = undefined;//刷新表格的時候?qū)⑿薷男刑栔每? 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 : '正在加載數(shù)據(jù)...',
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中進(jìn)行編輯
$("#datagrid").datagrid("acceptChanges");//在edit之前要接受上一次的修改內(nèi)容，否則如果這一次的修改出現(xiàn)了異常，會將前面所有的修改操作都撤銷（當(dāng)前這種撤銷是前端頁面顯示上的撤銷）。
$('#datagrid').datagrid('selectRow', index).datagrid('editCell', {index:index,field:field});
zbsjbj.editIndex = index;
}
}
}
,onEndEdit:function(index,row,changes){//結(jié)束編輯，如果內(nèi)容有變化的話，那么ajax后臺修改
var change = false;
//console.log(row);
//console.log(changes);
for(x in changes){
change = true;
break;
}
if(change){
zbsjbj.saveChanges(row,changes);
}
}
//單元格編輯事件結(jié)束
});
}else{
alert("查詢指標(biāo)字段出現(xiàn)異常！");
}
},
error:function(request,state,e){
alert("查詢指標(biāo)字段出現(xiàn)異常！");
}
});
}
,endEditing:function(field){//結(jié)束編輯
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("正在保存修改內(nèi)容！");
$.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("保存修改信息出現(xiàn)異常！");
__closeMask();
}
});
}
combobox根據(jù)id獲取顯示內(nèi)容
function getTextById(arr,id){
var text = "";
try{
$.each(arr,function(i,item){
if(item.ID==id){
text = item.TEXT;
return false;
}
//因為datasys中數(shù)據(jù)有01這種，而01和1判斷不相等，所以轉(zhuǎn)換成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<RoadTargets> 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;
}
后臺返回數(shù)據(jù)
{"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":"起點(diǎn)樁號","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":"止點(diǎn)樁號","fieldName":"ROADENDS","fieldType":"07","id":71,"isNull":null,"issys":null,"showIndex":null,"state":null,"tableName":null,"unit":null},{"bmDef":null,"enumStr":"公路技術(shù)等級代碼","fieldDes":null,"fieldLen":null,"fieldMean":"技術(shù)等級","fieldName":"JSDJ","fieldType":"08","id":72,"isNull":null,"issys":null,"showIndex":null,"state":null,"tableName":null,"unit":null}],"公路技術(shù)等級代碼":[{"TEXT":"請選擇","ID":""},{"ID":"10","TEXT":"高速"},{"ID":"11","TEXT":"一級"},{"ID":"12","TEXT":"二級"},{"ID":"13","TEXT":"三級"},{"ID":"14","TEXT":"四級"},{"ID":"30","TEXT":"等外公路"}]},"status":1}}
進(jìn)一步要求（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找不到的錯誤，猜測是因為點(diǎn)擊之后立馬進(jìn)行關(guān)閉combobox導(dǎo)致的，所以這里改成延時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);
}
}
};
進(jìn)一步要求（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);
}
});
進(jìn)一步要求（text開始編輯的時候獲取焦點(diǎn)）
我的解決辦法是這樣的，我的editor的type是text，這樣就可以獲取到焦點(diǎn)。
$('#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();是獲取不到焦點(diǎn)的，需要這么處理（官網(wǎng)的demo就是這樣的）：
var ed = $(this).datagrid('getEditor', param);
if (ed){
if ($(ed.target).hasClass('textbox-f')){
$(ed.target).textbox('textbox').focus();
} else {
$(ed.target).focus();
}
}
