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;
        }