1. 程式人生 > >jsp dialog 對話方塊

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,icon_cool.gif
+'...</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,icon_cool.gif+'...</a></td>'
         +"<td><a href=\"#\" onclick=\"doDetail('"+re[i].id+"')\" style=\"text-decoration:underline\">"+re[i].gjmbhyy.substr(0,icon_cool.gif
+"...</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");
}