分类 Jquery 下的文章
动态设置easyui数据表格编辑状态
实现修改操作是教职工号不可编辑，添加时教职工号可编辑功能
通过设置
var tt=$('#teachertb').datagrid('getColumnOption', 'tid');//得到此列
tt.editor={};//设置此列不可编辑
新添一行
function appendtea(){//添加
if (teaendEditing()){
$('#teachertb').datagrid('appendRow'
,{});
var tt=$('#teachertb').datagrid('getColumnOption','tid');// 得到此列，tid指的是列的field
tt.editor={type:'validatebox', options: { required: true}};//设置此列可编辑
teaeditIndex=$('#teachertb').datagrid('getRows').length-1;
$('#teachertb').datagrid('selectRow', teaeditIndex)
.datagrid('beginEdit', teaeditIndex);
}
}
修改
function teaonClickRow(index){
if (teaeditIndex != index){
if (teaendEditing()){
var tt=$('#teachertb').datagrid('getColumnOption', 'tid');//得到此列
tt.editor={};//设置此列不可编辑
$('#teachertb').datagrid('selectRow', index)
.datagrid('beginEdit', index);
teaeditIndex = index;
} else {
$('#teachertb').datagrid('selectRow', teaeditIndex);
}
}
}
效果
easyui可编辑表格中下拉框实现
easyui有个可编辑下拉框，官网demo是只给了一个html的代码它是直接从url里获取json数据
| 产品编号 | 产品 | 市场价 | 成本价 | 描述 | 状态 |
|---|
但是在这里我们在这里使用不行，没法直接获取通过路径直接从后台获取（ps:此处我也不知为什么从后台获取的json,还需要eval下然后加载..）
然后我就想用在定义每行数据是用js写,然后一开始预加载先将下拉框数据加载进来，然后编辑是直接设置加载进来的数据。
html
得到初始化数据
var tdeptna;
var tpostna;
var tdegreena;
$.ajaxSetup({async:false});
//初始化时动态加载教研室列表
$.getJSON("../SyscodeServlet?mode=getcodeByno&&codeno=jxdw",null,function call(data){
if(data.errmsg!=""){
alert(data.errmsg);
return;
}
var tdept=eval(data.result);
tdeptna=tdept;
$("#tdeptid").combobox('loadData', tdept);//直接加载数据
});
//加载职称
$.getJSON("../SyscodeServlet?mode=getcodeByno&&codeno=zhch",null,function call(data){
if(data.errmsg!=""){
alert(data.errmsg);
return;
}
var zhch=eval(data.result);
tpostna=zhch
});
//加载学位
$.getJSON("../SyscodeServlet?mode=getcodeByno&&codeno=xw",null,function call(data){
if(data.errmsg!=""){
alert(data.errmsg);
return;
}
var xw=eval(data.result);
tdegreena=xw;
});
initTable(tdeptna,tpostna,tdegreena);
定义可编辑表单
function initTable(tdept,tpost,tdegree){
$('#teachertb').datagrid({
columns:[[
{title:'教职工编号',field:'tid',width:85},
{title:'姓名',field:'tname',width:80},
{
title:'教研室',
field:'tdeptname',
width:200,
formatter:function(value,row){
return row.tdeptname;
},
editor:{
type:'combobox',
options:{
valueField:'codeid',
textField:'codecontent',
data:tdept,
required:true
}
}
},
{
title:'职称',
field:'tpostname',
width:100,
formatter:function(value,row){
return row.tpostname;
},
editor:{
type:'combobox',
options:{
valueField:'codeid',
textField:'codecontent',
heigh:100,
data:tpost,
required:true
}
}
},
{
title:'学位',
field:'tdegreename',
width:100,
formatter:function(value,row){
return row.tdegreename;
},
editor:{
type:'combobox',
options:{
valueField:'codeid',
textField:'codecontent',
data:tdegree,
required:true
}
}
}
]]
})
}
结束
$.getJSON不能外向外部域传值问题
使用$.getJSON函数时，想往全局域传值发现传不过去
var tdeptna;
var tpostna;
$.getJSON("../SyscodeServlet?mode=getcodeByno&&codeno=jxdw",null,function call(data){
if(data.errmsg!=""){
alert(data.errmsg);
return;
}
var tdept=eval(data.result);
tdeptna=tdept;
$("#tdeptid").combobox('loadData', tdept);//直接加载数据
});
console.log(tdeptna)
无法将tdept的值传给tdeptna，在网上查了一下，发现ajax默认是异步执行的，也就是说$.getJSON还没有执行完的情况下，console.log已经打印了。
解决：在$.getJSON前面加上$.ajaxSetup({async:false});就好了
var tdeptna;
var tpostna;
$.ajaxSetup({async:false});
$.getJSON("../SyscodeServlet?mode=getcodeByno&&codeno=jxdw",null,function call(data){
if(data.errmsg!=""){
alert(data.errmsg);
return;
}
var tdept=eval(data.result);
tdeptna=tdept;
$("#tdeptid").combobox('loadData', tdept);//直接加载数据
});
jquery ajax方式提交表单以及获取返回值加载easyui的table
html
js
function searchTeacher(){
/*绑定教师列表tealistform 查询*/
var options={
dataType: 'json',
success: teaResponse//获取返回数据的函数
};
$('#tealistform').form(options);//使用Ajax提交表单
}
function teaResponse(data){
var resultdata=$.parseJSON(data) //如果无法解析也可用eval,解析。
var tealist=resultdata.result;
$('#teachertb').datagrid('loadData', tealist);//向table加载数据
}