弹窗列表操作-javascript

永无止境2313
浏览: 50321 次
性别:
来自: 南京
最近访客更多访客>>

mouyu
wxylong
chiqiansunny
cinsyo
博主相关

博客
微博
相册
留言
关于我
文章分类

社区版块

存档分类

博客分类：
codes
javascript codes
<html>
<head>

<style> 

/*弹窗样式*/

.theme-buy { 
margin-top: 7%; 
text-align: center; 
} 

.theme-signin { 
font-size: 15px; 
} 

.theme-popover-mask { 
z-index: 100; 
position: absolute; 
left: 0; 
top: 0; 
width: 100%; 
height: 100%; 
background: #000; 
opacity: 0.5; 
filter: alpha(opacity = 50); 
-moz-opacity: 0.5; 
display: none; 
} 

.theme-popover { 
z-index: 200; 
position: absolute; 
top: 40%; 
left: 40%; 
width: 1000px; 
height: 540px; 
margin: -180px 0 0 -330px; 
border-radius: 5px; 
border: solid 2px #e4e4e4; 
background-color: #fff; 
display: none; 
box-shadow: 0 0 10px #666; 
background: #fff; 
} 

.theme-poptit { 
border-bottom: 1px solid #ddd; 
padding: 12px; 
position: relative; 
height: 24px; 
} 

.theme-poptit .close { 
float: right; 
color: #999; 
padding: 5px; 
margin: -2px -5px -5px; 
font: bold 14px/14px simsun; 
text-shadow: 0 1px 0 #ddd 
} 

.theme-poptit .close:hover { 
color: #444; 
} 

.theme-popbod { 
padding: 60px 15px; 
color: #444; 
height: 148px; 
} 

.dform { 
padding: 10px 10px 10px; 
text-align: left; 
} 

.theme-signin { 
margin: -50px -20px -50px 90px; 
text-align: left; 
font-size: 14px; 
} 

.theme-signin li { 
padding-left: 30px; 
margin-bottom: 15px; 
} 

.theme-signin li strong { 
float: left; 
margin-left: -80px; 
width: 80px; 
text-align: right; 
line-height: 32px; 
} 

.theme-signin .btn { 
margin-bottom: 10px; 
} 

.theme-signin p { 
font-size: 12px; 
color: #999; 
} 

.theme-popover-mask-dialog { 
z-index: 100; 
position: absolute; 
left: 0; 
top: 0; 
width: 100%; 
height: 100%; 
background: #000; 
opacity: 0.5; 
filter: alpha(opacity = 50); 
-moz-opacity: 0.5; 
display: none; 
} 

/* .theme-popover-dialog { 
z-index: 200; 
position: absolute; 
top: 160%; 
left: 60%; 
width: 400px; 
height: 500px; 
margin: -180px 0 0 -330px; 
border-radius: 5px; 
border: solid 2px #e4e4e4; 
background-color: #fff; 
display: none; 
box-shadow: 0 0 10px #666; 
background: #fff; 
} */ 

.theme-popover-dialog { 
z-index: 200; 
position: fixed; 
top: 25%; 
left: 35%; 
width: 750px; 
height: 500px; 
margin: -100px 0px 0px -150px; 
border-radius: 5px; 
border: solid 2px #e4e4e4; 
background-color: #fff; 
display: none; 
box-shadow: 0 0 10px #666; 
background: #fff; 
} 


.theme-poptit-dialog { 
border-bottom: 1px solid #ddd; 
padding: 12px; 
position: relative; 
height: 24px; 
} 

.theme-poptit-dialog .close { 
float: right; 
color: #999; 
padding: 5px; 
margin: -2px -5px -5px; 
font: bold 14px/14px simsun; 
text-shadow: 0 1px 0 #ddd 
} 

.theme-poptit-dialog .close:hover { 
color: #444; 
} 

.theme-popbod-dialog { 
padding: 60px 15px; 
color: #444; 
height: 248px; 
overflow-y:auto; 
} 

/* input */ 
.ipt { 
border: solid 1px #d2d2d2; 
border-left-color: #ccc; 
border-top-color: #ccc; 
border-radius: 2px; 
box-shadow: inset 0 1px 0 #f8f8f8; 
background-color: #fff; 
padding: 4px 6px; 
height: 21px; 
line-height: 21px; 
color: #555; 
width: 180px; 
vertical-align: baseline; 
} 

.ipt:focus { 
border-color: #95C8F1; 
box-shadow: 0 0 4px #95C8F1; 
} 

</style> 

<style>

/*查询表格样式*/
.wideT{ border-top:3px solid #D4D4D4}
.wideTable, .wideTable td{ border-collapse:collapse; font-size:13px;}
.wideTable td{ border:1px dashed #dcdcdc; border-width:1px 0; border-collapse:collapse; text-align:center; padding:5px 2px;}
.wideTable td.tabR{ text-align:right}
.wideTable td.tabL{ text-align:left}

.wideTable td a{  padding:0 15px 0 10px;}
td.moreOut{  width:200px;}
.moredo{ display:inline-block; float:left;}
.moredoNow{ position:absolute; margin-top:-11px; *margin-top:-22px;background:#fff ;display:block; z-index:1;border:1px solid #959595; 
-moz-border-radius:3px;-khtml-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;
 -webkit-box-shadow:0px 0px 5px #c0c0c0;-moz-box-shadow:0px 0px 5px #c0c0c0;}
 
 
 .wideTable thead td{ border:0; background:#e2ebf4; font-weight:bold; padding:7px 2px;}
.wideTable tfoot td{ border:1px solid #e1e1e1;border-width:1px 0; text-align:right; padding-right:15px; font-size:12px;}
.wideTable tfoot td a { border:1px solid #d5d5d5; padding:5px 10px; color:#696969; line-height:24px; margin-left:4px;}
.pagesNo{border:1px solid #d5d5d5; color:#696969; height:24px; display:inline-block; margin-left:4px; padding:0;}
input.pNo{ line-height:18px; border:0; width:20px; vertical-align:middle}
input.pGo{ line-height:20px; border:0; vertical-align:middle}

.wideTable tr.even td{ background:#f8f8f8}
.wideTable tr.pass td{ background:#f6ffc6}

</style>

<style>

/*css reset*/
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
	margin:0;
	padding:0;
	border:0;
	font-weight:inherit;
	font-style:inherit;
	font-size:100%;
	font-family:inherit;
	vertical-align:baseline;
}
body {line-height:1.5;}
table {border-collapse: collapse;border-spacing:0;}
caption, th, td {text-align:left;font-weight:normal;}
table, td, th {vertical-align:middle;}	
blockquote:before, blockquote:after, q:before, q:after {content:"";}
blockquote, q {quotes:"" "";}
a img {border:none;}


body { background:#fff; font: 12px/1.5 Tahoma, Helvetica, Arial, sans-serif ;color:#666;}
h1, h2, h3, h4, h5, h6 {font-weight:normal;color:#111;font-size:12px; }
a:focus, a:hover {color:#000;}
a {color:#009;text-decoration:none;}
dl, dt, dd, ol, ul, li{ list-style:none;}

</style>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>



</head>

<body>


<input type="button" value="弹窗" onclick="hidedialog();"/>

<div class="theme-popover-dialog"> 
<div class="theme-poptit-dialog"><a href="javascript:;" title="关闭" 
class="close">×</a> 
<h3>信息</h3> 
</div> 
<div class="theme-popbod-dialog dform"> 
<span id="spanTitle" style="color:red"></span> 
<table id="myTableQh" width="100%" border="0" class="wideTable"> 
<thead id="myTheadQh"> 
<tr> 
<td>参数1</td> 
<td>参数1</td> 
<td>参数1</td> 
<td>参数1</td> 
<td >操作</td> 
</tr> 
</thead> 
<tbody id="myTbodyQh"> 

</tbody> 
<tfoot id="myTfootQh"> 

<tr> 
<td class="tabL" colspan="5"><input name="input2" type="button" value="新增" class="buttonGray" onclick="addTableRecord();"/></td> 
</tr> 


</tfoot> 


</table> 
</div> 

<div> 

<input class="buttonGray" type="button" name="submit" 
onclick="assignValue();" value=" 保存 " /> &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp<input 
class="buttonGray" id="closemoreFile" type="button" name="submit" 
onclick="closedialog();" value=" 关闭 " /> 
</div> 


</div> 
<div class="theme-popover-mask-dialog"></div> 



<script> 

function hidedialog(){ 


$('.theme-popover-mask-dialog').show(); 
$('.theme-popover-mask-dialog').height($(document).height()); 
$('.theme-popover-dialog').slideDown(200); 

//initData(); 
  
} 

function closedialog() 
{ 
$('.theme-popover-mask-dialog').hide(); 
$('.theme-popover-dialog').slideUp(200); 
} 

$(document).ready(function($){ 
$('.theme-poptit .close').click(function(){ 
$('.theme-popover-mask').hide(); 
$('.theme-popover').slideUp(200); 
}); 

$('.theme-poptit-dialog .close').click(function(){ 
$('.theme-popover-mask-dialog').hide(); 
$('.theme-popover-dialog').slideUp(200); 
});     
}); 






function deleteTableRecord(obj,id){ 
if(confirm("确定要删除该数据吗？")) { 
if (id == -1) { 
$(obj).parent().parent().remove(); 
} else { 
$.ajax({ 
url: url, 
type: 'POST', 
data: {id:id}, 
dataType: 'json', 
async: false, 
success: function(jObj){ 
if(jObj.success) { 
$(obj).parent().parent().remove(); 
alert("删除成功！"); 
} else { 
alert("删除失败!"); 
} 

} 
}); 
} 
} 
} 




var idxTr = 0; 
function addTableRecord(){ 
var html = "<tr>"; 

html = html + "<td data-id='param1' edit='0' style='display: none'>-1</td>"; 
html = html + "<td data-id='param1' edit='0' style='display: none'></td>"; 

html = html + "<td data-id='param1' style='word-break: break-all;font-size:12px' ><select ></select></td>"; 
html = html + "<td data-id='param1' style='word-break: break-all;font-size:12px' ><select ></select></td>"; 
html = html + "<td data-id='param1' style='word-break: break-all;font-size:12px' edit='1'><select></select></td>"; 
html = html + "<td data-id='param1' style='word-break: break-all;font-size:12px' edit='1'></td>"; 
html = html + "<td data-id='param1' style='word-break: break-all;font-size:12px' edit='0'></td>"; 
html = html + "</tr>"; 
$(html).appendTo($("#myTbodyQh"));	
new tableEdit('myTbodyQh'); 
} 


function initData(keyId) { 


$.ajax({ 
url: url, 
type: 'POST', 
dataType: 'json', 
data: {keyId:keyId}, 
async: false, 
success: function(jObj){ 
$("#myTbodyQh").empty(); 


if(jObj.bodyList!=null && jObj.bodyList.length > 0) { 
var bodyHtml=""; 
for(var i=0; i<jObj.bodyList.length; i++) { 
var bodyObj=jObj.bodyList[i]; 

var id = bodyObj["param1"] || ""; 
var storeId = bodyObj["param1"] || ""; 

var provinceNameVal = bodyObj["param1"] || ""; 
var cityNameVal = bodyObj["param1"] || ""; 
var storeNameVal = bodyObj["param1"] || ""; 
var terminalCntVal = bodyObj["param1"] || ""; 

bodyHtml = bodyHtml + "<tr>"; 

bodyHtml = bodyHtml + "<td data-id='param1' edit='0' style='display: none'>" + param1 + "</td>"; 
bodyHtml = bodyHtml + "<td data-id='param2' edit='0' style='display: none'>" + param1 + "</td>"; 

bodyHtml = bodyHtml + "<td data-id='param3' style='word-break: break-all;font-size:12px;color:red' edit='0'>" + param1 + "</td>"; 
bodyHtml = bodyHtml + "<td data-id='param4' style='word-break: break-all;font-size:12px;color:red' edit='0'>" + param1 + "</td>"; 
bodyHtml = bodyHtml + "<td data-id='param5' style='word-break: break-all;font-size:12px;color:red' edit='0'>" + param1 + "</td>"; 
bodyHtml = bodyHtml + "<td data-id='param6' style='word-break: break-all;font-size:12px;color:red' edit='0'>" + param1 + "</td>"; 
bodyHtml = bodyHtml + "<td data-id='param7' style='word-break: break-all;font-size:12px' edit='0'></td>"; 


bodyHtml = bodyHtml + "</tr>"; 


} 
$(bodyHtml).appendTo($("#myTbodyQh")); 
} 


} 
}); 
new tableEdit('myTbodyQh'); 


} 

function valiTable() { 
var flag = true; 


return flag; 
} 

function assignValue() { 
if (!valiTable()) { 
return; 
} 

var table = $('#myTbodyQh').tableRowsToJSONWithFilter(); 

$.ajax({ 
url: url, 
type: 'POST', 
data: {param1:param1}, 
dataType: 'json', 
async: false, 
success: function(jObj){ 
// 重新加载 
initData(); 
if(jObj.success) { 
alert("保存成功！"); 

} else { 
alert("保存失败!"); 
} 

} 
}); 
} 

function deleteTableRecord(obj,id){ 
//if(confirm("确定要删除该数据吗？")) { 
if (id == -1) { 
$(obj).parent().parent().remove(); 
} else { 
$.ajax({ 
url: url, 
type: 'POST', 
data: {id:id}, 
dataType: 'json', 
async: false, 
success: function(jObj){ 
if(jObj.success) { 
$(obj).parent().parent().remove(); 
alert("删除成功！"); 
} else { 
alert("删除失败!"); 
} 

} 
}); 
} 
//} 
} 

</script>

<script>



function tableEdit(table) { 
table = table || document.getElementsByTagName("table")[0]; 
var tab = (typeof(table) == "string" || typeof(table) == "String") ? document.getElementById(table) : table; 
var td = $(tab).find('td'); 
td.click(tdClick); 
} 


function validate(table) 
{ 
table = table || document.getElementsByTagName("table")[0]; 
var tab = (typeof(table) == "string" || typeof(table) == "String") ? document.getElementById(table) : table; 
$(tab).find('td').each(function(){ 
var len = $(this).attr('maxLength'); 
var reg = $(this).attr('reg'); 
var isNill = $(this).attr('isNill'); 
}); 
} 

function tdClick(){ 
    //将td的文本内容保存 
attr = $(this).attr('edit'); 
if (attr !== undefined && attr == '0') { 
return; 
} 

   if($(this).has('select').length>0) 
   { 
      return; 
   } 
   var len = $(this).attr('maxLength'); 
   var reg = $(this).attr('reg'); 
   var regMsg = $(this).attr('regMsg'); 
   
   var td = $(this); 
   var tdText = td.text(); 
    //将td的内容清空 
   td.empty(); 
    //新建一个输入框 
   var input = $("<input>"); 
    //将保存的文本内容赋值给输入框 
   input.attr("value",tdText); 
    //将输入框添加到td中 
   td.append(input); 
    //给输入框注册事件，当失去焦点时就可以将文本保存起来 
   input.blur(function(){ 
        //将输入框的文本保存 
        var input = $(this); 
        var inputText = input.val(); 
        var msg = ""; 
        
        if(len !== undefined){ 
    len = parseInt(len); 
    if(inputText.length>len){ 
  alert(inputText+"长度过长，不能超过"+len+"位"); 
  window.setTimeout(function () { input.focus();}, 0); 
  return false; 
    }	  
          } 
        if(reg !== undefined){ 
        var patt1=new RegExp(reg); 
        if(!patt1.test(inputText)){ 
        if(regMsg !== undefined){ 
                alert(regMsg); 
                window.setTimeout(function () { input.focus();}, 0); 
            return false; 
            }else 
            { 
            alert(inputText+"格式不正确"); 
                window.setTimeout(function () { input.focus();}, 0); 
            return false; 
            } 
                 } 
         } 
        
        //将td的内容，即输入框去掉,然后给td赋值 
        var td = input.parent("td"); 
        td.html(input.val()); 
        //让td重新拥有点击事件 
        td.click(tdClick); 

   }); 
    input.keyup(function(event){ 
        //1.获取当前用户按下的键值 
             //解决不同浏览器获得事件对象的差异, 
             // IE用自动提供window.event，而其他浏览器必须显示的提供，即在方法参数中加上event 
           var myEvent = event || window.event; 
           var keyCode = myEvent.keyCode; 
           //2.判断是否是ESC键按下 
          if(keyCode == 27){ 
               //将input输入框的值还原成修改之前的值 
              input.val(tdText); 
           } 
    }); 
   //将输入框中的文本高亮选中 
   //将jquery对象转化为DOM对象 
   var inputDom = input.get(0); 
    inputDom.select(); 
    //将td的点击事件移除 
   td.unbind("click"); 
} 




(function($) { 
  $.extend($.fn, { 
    tableRowsToJSONWithFilter : function (filter) { 
      var tableSelector = this, item, attr,len, data, _JSON = []; 
      if (typeof(tableSelector) !== 'object') { 
        return new Error('Invalid tableSelect!'); 
      }; 
      $(tableSelector).find('tr').each(function(index, tr) { 
        item = {}; 
        $('td', $(this)).each(function(index, td) { 
          attr = $(td).attr('data-id'); 

  if($(td).has('select').length>0) 
  { 
data = $(td).children('select').val(); 
  } 
                  else if ($(td).has('input:radio').length>0) { 
data = $(td).children('input:radio:checked').val(); 
  } 
  else 
  { 
      data = $(td).text(); 
  } 
  
          if (attr !== undefined && data !== '') { 
            item[attr] = $.trim(data); 
          }; 
        }); 
        _JSON.push(item); 
      }); 
      return _JSON; 
    } 
  }) 
})(jQuery);

</script>



</body>

</html>
分享到：
eclipse jdk1.6 点击展开项目卡死 | 反射读取解析excel模板到集合
2017-08-30 18:36
浏览 785
评论(0)
分类:研发管理
查看更多
发表评论

您还没有登录,请您登录后再发表评论
最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

弹窗列表操作-javascript

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

弹窗列表操作-javascript

评论

发表评论

相关推荐

itext生成pdf

微服务系统设计(元素)

String与Long类型比较的陷阱

poi设置下拉框

poi之getPhysicalNumberOfCells与getLastCellNum

javascript校验信息

下载poi生成的excel

反射读取解析excel模板到集合

jquery操作table添加行

java后台判断浏览器属性

前台异步交互示例

最近访客更多访客>>
