jsp dialog 对话框

=====dialog如果div内容是用table动态拼接的内容多次加载的话会一直累加，除非用form每次都会load新的数据，下面看是动态拼接时如何清除上一次的====
function doDetail(){
alert(000);
var table;
$.ajax({
url:'${ctx}/current-alarm!querySJ.json',
type:'POST',
data:'',
async:false,
success:function(data){
alert(2);
$("#detail-form").append('');
table = '<table width="100%" border="0" cellspacing="0" cellpadding="0">';
table +='<tr><th>创建时间</th><th>状态</th><th>当前处理人</th></tr>';
var detail =eval(data);
alert(detail.length);
if(detail){
alert(detail[0]);
for(var i=0;i<detail.length;i++){
alert(detail[i][0]);
var tr='<tr>';
tr+='<td>'+detail[i][1]+'</td>';
tr+='<td>'+detail[i][2]+'</td>';
tr+='<td>'+detail[i][3]+'</td>';
tr+='</tr>';
table += tr;
}
}
table += '</table>';
$("#detail-form").append(table);
}
});
document.getElementById("detail-form").style.display= "block";
$("#detail-form").dialog({
autoOpen : false,
/////要有滚动条的设置这里具体高度
height : 'auto',
width : 400,
modal : true,
onClose:function(){
$("#detail-form").empty();
////在empty之后会消掉之前的样式，这里再加上
$("#detail-form").attr("style", "display: none;overflow-y:auto;height:100%;");
}
});
$("#detail-form").dialog("open");

alert(table);
}


div里面放什么就会显示什么
<%
   String oui= request.getContextPath() + "/organization!queryOrganizationById.json?id=";

%>



function orgdetail(id) {
alert(11);
//获取数
var ui='<%=oui%>'
var urll =ui+id
alert(urll);
var b;
//用这种ajax只要用ajaxa的上下文交互传值，不要用到action，他可以取代action上下文同名传值的方式
$.ajax({
type : 'get',
url : urll,
dataType : 'json',
success : function(data) {
//load data
b=eval(data[0]);
//注意返回的就是object，可以不eval转，但是要注意是数组，还是单个对象。
//如果返回单个对象，有双引号，可以用list的形式返回，之后用数组取出。
alert("bbb"+b.ip);
alert(data[0].ssqy);
alert(data[0].name);
alert(data[0].ms);
alert(data[0].addres);
$("#form11").form("load", data[0]);  //这里分了两步先用ajax取，后form手动加载这个返回数据
//如果用action同名值映射一步到位
//$("#form11").form("loadData",data[0]);
}
});
//$("#form11").form("load", '/organization!queryOrganizationByIdStruts.json?id='+id); 
document.getElementById("search-form").style.display= "block";";//easyui不具备把div open后设置里面的
//内容也显示，公司的cui会，所以此时手动设置为显示。

$("#search-form").dialog({
hide:true, //点击关闭是隐藏,如果不加这项,关闭弹窗后再点就会出错.
autoOpen : false,
height : 'auto',
width : 400,
modal : true

});
$("#search-form").dialog("open");

//$("#search-form").dialog("open");
// $('#search-form').dialog({  
       // title: 'My Dialog2',  
       // width: 400,  
       // height: 200,  
       // closed: false,  
       // cache: false,  
      //  modal: true 
       
    // }); 这种也可以  


}
<div id="search-form" title="用户节点增加" style="display: none;width: 400px;" >
<cui:form id="form11" name="form" action="" style="width: 400px;">
<div style="float: left;padding-top: 8px;">
<label>&nbsp;用户节点名称：</label>
<cui:input id="name"
name="name" value="" width="200" />
</div>
<div style="float: left;padding-top: 8px;">
<label>&nbsp;用户节点地址：</label>
<cui:input id="ip"
name="ip" value="" width="200" />
</div>
<div style="float: left;padding-top: 8px;">
<label>&nbsp;所属区域：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
<cui:combobox id="ssqy1"
name="ssqy1"  width="200" value=""
emptyText="请选择" data="ssqy" ></cui:combobox>
</div>
<div style="float: left;padding-top: 8px;">
<label>&nbsp;用户节点说明：&nbsp;</label>
<cui:textarea id="ms" name="ms"  width="260"></cui:textarea>
</div>
</cui:form>
</div>


public String queryOrganizationById() {
String id = model.getId();
Organization org = new Organization();
List<Organization> tr = new ArrayList<Organization>();
tr = this.getService().queryOrgById(id);
if (tr.size() > 0) {
org = tr.get(0);

String json = JSONArray.fromObject(org).toString();
HttpServletResponse response = ServletActionContext.getResponse();
;
response.setCharacterEncoding("utf-8");
// ServletOutputStream out = null;
BufferedWriter write = null;
try {
write = new BufferedWriter(new OutputStreamWriter(
response.getOutputStream(), "UTF-8"));
write.write(json);
// out = response.getOutputStream();
// out.write(json.getBytes());
} catch (IOException e) {
e.printStackTrace();
} finally {
try {
// out.flush();
// out.close();
write.flush();
write.close();
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
return null;

} else {
return null;
}

}


=======================一例子===================
包含为什么有些脚本触发函数传值无效，用双引号才可？？？？？？？？？？？？？
全局变量的使用，结合参数循环匹配
空值在jsp中的处理
动态拼接任意table
弹框高度，宽度的设置

//割接通告
var re ;
function gjtg(){
$.ajax({
url:'${ctx}/cut-over-order!getgj.json',
type:'POST',
data:'',
async:false,
success:function(result){ 
$("#gjtg").append('');
var table = '<table width="100%" border="0" cellspacing="0" cellpadding="0">';
re = result.data;

for(var i=0; i<re.length; i++){
var id=re[i].id;
table += '<tr style="height:25px; line-height:25px;">'
+'<td align="left" width="50%" style="padding-left:10px">'+re[i].createtime.substr(0, 16)+'</td>'
=============这边用这种单频号不能调用要传参数的脚本函数，要触发的函数能传参数，用双引号=========
//+'<td class="red" width="50%"><a href="#" title="'+re[i].gjmbhyy+'" style="text-decoration:underline">'+re[i].gjmbhyy.substr(0,+'...</a></td>'
//+'<td class="msg_detal" width="50%" ><a href="javascript:;" title="'+re[i].gjmbhyy+'" style="text-decoration:underline" onclick="doDetail();">'+re[i].gjmbhyy.substr(0,+'...</a></td>'
         +"<td><a href=\"#\" onclick=\"doDetail('"+re[i].id+"')\" style=\"text-decoration:underline\">"+re[i].gjmbhyy.substr(0,+"...</a></td>"
        +'</tr>';
}
table += '</table>';
$("#gjtg").append(table);
}
});
}
function doDetail(id){

$("#xq").append('');
var table = '<table width="100%" border="0" cellspacing="0" cellpadding="0">';



for(var i=0;i<re.length;i++){
if(re[i].id==id){
alert(11);
table += '<tr style="height:25px; line-height:25px;">'
+'<th align="left" width="25%" >割接发起人：</th>';
if(re[i].creator==""||re[i].creator==null){
table += '<td align="left" width="25%" ></td>';
}else{
table += '<td align="left" width="25%" >'+re[i].creator+'</td>';
}
table += '<th align="left" width="25%" >创建时间：</th>';
if(re[i].createtime==""||re[i].createtime==null){
table += '<td align="left" width="25%" ></td>';
}else{
table += '<td align="left" width="25%" >'+re[i].createtime+'</td>';
}
table += '</tr>'
+'<tr style="height:25px; line-height:25px;">'
+'<th align="left" width="25%" >割接负责人：</th>';
if(re[i].currentActors==""||re[i].currentActors==null){
table += '<td align="left" width="25%" ></td>';
}else{
table += '<td align="left" width="25%" >'+re[i].currentActors+'</td>';
}
table += '<th align="left" width="25%" >割接时间：</th>';
if(re[i].gjsj==""||re[i].gjsj==null){
table += '<td align="left" width="25%" ></td>';
}else{
table += '<td align="left" width="25%" >'+re[i].gjsj+'</td>';
}

table +='</tr>'
+'<tr style="height:25px; line-height:25px;">'
+'<th align="left" width="25%" >割接目标和原因：</th>';
if(re[i].gjmbhyy==""||re[i].gjmbhyy==null){
table +='<td align="left" width="25%" ></td>';
}else{
table +='<td align="left" width="25%" >'+re[i].gjmbhyy+'</td>';
}
table +='</tr>'
+'<tr style="height:25px; line-height:25px;">'
+'<th align="left" width="25%" >紧急程度</th>';
if(re[i].jjcd==""||re[i].jjcd==null){
table +='<td align="left" width="25%" ></td>';
}else{
table +='<td align="left" width="25%" >'+re[i].jjcd+'</td>';
}
table +='</tr>';
}
}
table += '</table>';
$("#xq").append(table);
document.getElementById("xq").style.display= "block";
$("#xq").dialog({
autoOpen : false,
height : 'auto',
width : 590,
modal : true,
onClose:function(){
$("#xq").empty();
$("#xq").attr("style", "display: none;overflow-y:auto;height:100%;");
}
});
$("#xq").dialog("open");
}