easyui tree datagrid动态添加表头和表格数据，动态弹出框，修改和删除按钮
1.要有获取表头的URL和表格的URL
背景：点击树的一个节点，就加载一个表格，这个表格是动态的，表头和表格数据都是动态的
解决方案：需要两个URL，一个是获取表头的URL，一个是获取表格数据的URL
$("#tvGy").tree({
url:"url",
method:"post",
onClick:function(node){
//......
},
onSelect:function(node){
var resultData={
"flbs":node.id,
"tbs":node.attributes.tbs
};
$.ajax({
url:"mvc/queryCxzd.html",//查询表头的URL
type:"post",
dataType:"json",
data:{
flbs:node.id,
tbs:node.attributes.tbs
},
success:function(data1){
newData=data1;
var colData=new Array();
var columnsAll=new Array();
//如果数据不为空，则添加遍历该数据的集合
if(data1.length>0){
var col={};
col["title"]='id';
col["field"]='id';
col["width"]=0;
col["hidden"]=true;
colData.push(col);
for(var i=0;i<data1.length;i++){
//把返回的数据封装到一个对象中
var col={};
col["title"]=data1[i].FBS;
col["field"]=data1[i].FBS;
col["width"]=100;
col["algin"]="cneter";
//把这个对象添加到列集合中
colData.push(col);
}
var colOper={};
colOper["title"]="操作";
colOper["field"]="operation";
colOper["width"]=60;
colOper["algin"]="cneter";
colOper["formatter"]=function(value,rowData,rowIndex){
var str="<a id='btnEdit' href='javascript:void(0)' onclick='editUser("+rowIndex+")' class='easyui-linkbutton btnsj xgbtnsj' style='text-decration:none;'>修改 </a> <a id='btnDel' href='javascript:void(0)' onclick='deleterow("+rowIndex+") class='easyui-linkbutton btnsj xgbtnsj' style='text-decration:none;''>删除</a>";
return str;
};
colData.push(colOper);
}
columnsAll.push(colData);
var resultJson=Json.stringify(resultData);
//添加表格数据
$("#dgdata").datagrid({
url:"mvc/queryCxsj.html",
loadMsg:"数据加载中...",
pagination:true, //分页
pagesize:10, //每页有10行数据
pageList:[10,20,30,40], //注意这些数值是pagesize的倍数
fit:true,
fitColumns:false, //false,表示不会出现横向滚动条；true,则表示能出现横向滚动条(列少的时候用)
nowarp:false, //当表格中某一行的一个列内容较多时，就会自动折行（换下一行显示）
border:false, //去掉datagrid的边框
idField:'id', //自动标记选中的行，换页后，前面所选中的行依然保留
columns:columnsAll,
queryParams:{
resultData:resultJson
}
});
}
});
}
});
2.动态弹出框
背景：点击新建按钮，就弹出框，弹出框里面的内容是动态表格里面的数据
解决方案：将表格中数据通过html()这样的方法拼到弹出框里面
var newData="";
//新建按钮弹出框
$("#btnNew").click(function(){
if(newData != ""){
var tbstr="";
for(var i=0;i<newData.length;i++)
{
if(newData[i].SJLX==3)//根据数据不同的类型把html拼到弹出框上去
{
tbstr+="<tr><td style='width:0px;'></td><td style='width:100px;' align='right'>"+newData[i].FBS+"</td><td style='width:200px;'><input id='"+newData[i].FBS+"' class='zydatebox' style='width:200px;height:32px;line-height:32px;' type='text'/></td></tr><tr></tr>";
}else if(newData[i].SJLX==3)
{
tbstr+="<tr><td style='width:0px;'></td><td style='width:100px;' align='right'>"+newData[i].FBS+"</td><td style='width:200px;'><input id='"+newData[i].FBS+"' class='zydatetime' style='width:200px;height:32px;line-height:32px;' type='text'/></td></tr><tr></tr>";
}else{
tbstr+="<tr><td style='width:0px;'></td><td style='width:100px;' align='right'>"+newData[i].FBS+"</td><td style='width:200px;'><input id='"+newData[i].FBS+"' class='easyui-textbox' style='width:200px;height:32px;line-height:32px;' type='text'/></td></tr><tr></tr>";
}
}
//保存和取消按钮
var tbopr="";
tbopr +="<tr><td></td><td></td><td align='center' colspan='2' style='height:40px;'>"+
"<a id='btnCommit' href='javascript:void(0)' class='easyui-linkbutton l-btn' style='color:#fff' onclick='commit()' >保存</a>"+
"<a id='btnCancel' href='javascript:void(0)' class='easyui-linkbutton l-btn' style='color:#fff' onclick='cancel()' >取消</a></td></tr>";
$("#addtr").html(tbstr+tbopr);
$(".zydatebox").datebox();
$(".zydatetime").datetimebox();
}
$("#dlDataInfo").dialog({
width:400,
height:350,
title:"数据信息",
modal:true
});
//弹出框在页面显示的高度
$(".panel.window").css("top","0");
});
3.datagrid中每一行的修改和删除按钮
注意点：要将每一行的id传到修改和删除按钮的函数中
（1）修改按钮
//修改按钮
function editUser(id)
{
var row=$("#dgdata").datagrid("getData").rows[id];
if(newData!=''){
var tbstr='';
//遍历row
for(var i=0;i<newData.length;i++)
{
var zdvalue="";
for(var key in row)
{
if(key==newData[i].FBS)
{
zdvalue=row[key];
}
}
if(newData[i].SJLX==3)//根据数据不同的类型把html拼到弹出框上去
{
tbstr+="<tr><td style='width:0px;'></td><td style='width:100px;' align='right'>"+newData[i].FBS+"</td><td style='width:200px;'><input id='"+newData[i].FBS+"' class='easyui-datebox zydatebox' data-options='formatter:myformatter,parser:myparser' style='width:200px;height:32px;line-height:32px;' type='text'/></td></tr><tr></tr>";
}else if(newData[i].SJLX==3)
{
tbstr+="<tr><td style='width:0px;'></td><td style='width:100px;' align='right'>"+newData[i].FBS+"</td><td style='width:200px;'><input id='"+newData[i].FBS+"' class='easyui-datetimebox zydatetime' data-options='formatter:myformatterTime,parser:dateparser' style='width:200px;height:32px;line-height:32px;' type='text'/></td></tr><tr></tr>";
}else{
tbstr+="<tr><td style='width:0px;'></td><td style='width:100px;' align='right'>"+newData[i].FBS+"</td><td style='width:200px;'><input id='"+newData[i].FBS+"' class='easyui-textbox' style='width:200px;height:32px;line-height:32px;' type='text'/></td></tr><tr></tr>";
}
}
//保存和取消按钮
var tbopr="";
tbopr +="<tr><td></td><td></td><td align='center' colspan='2' style='height:40px;'>"+
"<a id='btnCommit' href='javascript:void(0)' class='easyui-linkbutton l-btn' style='color:#fff' onclick='commitEdit("+id+")' >保存</a>"+
"<a id='btnCancel' href='javascript:void(0)' class='easyui-linkbutton l-btn' style='color:#fff' onclick='cancel()' >取消</a></td></tr>";
$("#addtr").html(tbstr+tbopr);
$(".zydatebox").datebox();
$(".zydatetime").datetimebox();
if(row)//只有选中行才有弹框
{
$("#dlDataInfo").dialog({
width:400,
height:350,
title:"数据信息",
modal:true
});
//弹出框在页面显示的高度
$(".panel.window").css("top","0");
}else{
$.messager.alert("提示","请选择数据进行编辑");
}
}
}
//修改按钮保存
function commitEdit(id)
{
var row=$("#dgdata").datagrid("getData").rows[id];
var resultData={
"flbs":flbs,
"tbs":tbs,
"id":row.id,
"zdValue":gerFormJson("#ffDataInfo")
};
$.ajax({
url:"mvc/update.html",
type:"post",
dataType:"json",
data:{
data:JSON.stringify(resultData)
},
success:function(data){
$.messager.alert("提示","请选择数据进行编辑");
}
});
}
（2）删除按钮
//删除按钮 function deleterow(index){ var row=$("#dgdata").datagrid("getData").rows[index]; if(row){//只有选中行的时候才有弹框 $.messager.confirm("删除","确定删除吗？",function(r){ if(r){ $.ajax({ url:"mvc/delete.html", type:"post", data:{ data:row.id }, dataType:"json", success:function(data){ $("#dgdata").datagrid("reload"); }, error:function(data){ $.messager.alert("连接失败！"); } }); } }); } }
（3）form表单格式化为标准json
//form表单格式化为标准json function gerFormJson(form){ var o={}; var a=$(form).serializeArray(); $.each(a,function(){ if(o[this.name]!=undefined){ if(!o[this.name].push){ o[this.name]=[o[this.name]]; } o[this.name].push(this.value||""); }else{ o[this.name]=this.value||""; } }); return o; }
