【Jquery】jquery仿excel修改

Continue Read..
<div class="col-md-12">
      <table class="table table-striped table-hover">
     <thead>
       <tr>
         <th>服务器ID</th>
         <th>在线人数</th>
         <th>上限</th>
         <th>状态</th>
       </tr>
     </thead>
     <tbody>
       <?php if(!empty($data)): ?>
       <?php foreach($data as $key=>$val): ?>
       <tr>
         <td class="gsid" id="gsid_<?php  echo $val['gsid']; ?>"    ><?php echo !empty($val['gsid']) ? $val['gsid'] : ''; ?></td>
         <td class="onlinecount2"  id="onlinecount2_<?php  echo $val['gsid']; ?>" onclick="onlinecount2Fun(<?php  echo $val['gsid']; ?>)"   ><?php echo !empty($val['onlinecount2']) ? $val['onlinecount2'] : ''; ?></td>
         <td class="waterlevel" id="waterlevel_<?php  echo $val['gsid']; ?>"  onclick="waterlevelFun(<?php  echo $val['gsid']; ?>)"  ><?php echo !empty($val['waterlevel']) ? $val['waterlevel'] : ''; ?></td>
         <td class="optype"  id="optype_<?php  echo $val['gsid']; ?>" onclick="optypeFun(<?php  echo $val['gsid']; ?>)"   ><?php echo !empty($optypeArr[$val['optype']]) ? $optypeArr[$val['optype']] : ''; ?></td>
       </tr>
       <?php endforeach; ?>
       <?php else: ?>
       <tr>
         <td colspan="9" >没有记录</td>
       </tr>
       <?php endif; ?>
     </tbody>
 </table>
 

</div>



<script type="text/javascript">  
/*
function gsidFun(gsid){
var obj = "#gsid_"+gsid;
        if(!$(obj).is('.input')){    
            $(obj).addClass('input').html('<input id="input_gsid_"'+gsid+' type="text" value="'+ $(obj).text() +'" />').find('input').focus().blur(function(){    
                var thisvalue=$(this).val();    
                $(obj).removeClass('input').html(thisvalue || $(obj).text());    
                ajaxData(gsid);
            });                        
        }    
}
*/
function onlinecount2Fun(gsid){
var obj = "#onlinecount2_"+gsid;
        if(!$(obj).is('.input')){    
            $(obj).addClass('input').html('<input id="input_onlinecount2_"'+gsid+' type="text" value="'+ $(obj).text() +'" />').find('input').focus().blur(function(){    
                var thisvalue=$(this).val();    
                $(obj).removeClass('input').html(thisvalue || $(obj).text());    
                ajaxData(gsid);
            });                        
        }    
}
function waterlevelFun(gsid){
var obj = "#waterlevel_"+gsid;
        if(!$(obj).is('.input')){    
            $(obj).addClass('input').html('<input id="input_waterlevel_"'+gsid+' type="text" value="'+ $(obj).text() +'" />').find('input').focus().blur(function(){    
                var thisvalue=$(this).val();    
                $(obj).removeClass('input').html(thisvalue || $(obj).text());    
                ajaxData(gsid);
            });                        
        }    
}


function optypeFun(gsid){
var obj = "#optype_"+gsid;
var optype_value = $(obj).html();
var html = '<select >';
<?php  foreach ($optypeArr as $k=>$v){  ?>
//alert(optypeid+"-"+<?php  echo $k ?>);
if(optype_value == "<?php  echo $v ?>"){
var html =html+'<option selected="selected" value="<?php echo $v ?>"><?php echo $v ?></option>';
}else{
var html =html+'<option  value="<?php echo $v ?>"><?php echo $v ?></option>';
}
<?php  }  ?>
// console.log(html);
var html =html+'</select >';
        if(!$(obj).is('.select')){    
            $(obj).addClass('select').html(html).find('select').focus().blur(function(){    
                var thisvalue=$(this).val();    
                $(obj).removeClass('select').html(thisvalue || $(obj).text());    
                ajaxData(gsid) ;
            });                        
        }    
}




function ajaxData(gsid){
var gsidval = $("#gsid_"+gsid).html();
var onlinecount2val = $("#onlinecount2_"+gsid).html();
var waterlevelval = $("#waterlevel_"+gsid).html();
var optypeval = $("#optype_"+gsid).html();
// alert(gsidval);
// alert(onlinecount2val);
// alert(waterlevelval);
// alert(optypeval);

$.ajax({
url: '/conversion/ajaxdata',
data:{ gsidval:gsidval ,onlinecount2val:onlinecount2val,waterlevelval:waterlevelval,optypeval:optypeval},
dataType: "json",
type:'post',
async: false,
success: function (result) {
if (result.d.flag) {
alert(result.d.msg);
return;
}
else {
alert(result.d.msg);
return;
}
}
});
}
</script>   

声明:此文系舞林cuznwww.wulinlw.org)原创稿件,转载请保留版权

自定义左右滚动效果

Continue Read..
点击查看原图

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>自定义滚动功能</title>
<script>
function getEle(f,s){
var result = [];
var elements = null;
if(s.charAt(0) == '.'){
if(typeof f === 'string'){
var par = document.getElementById(f.substring(1));
if(!par){
return result;
}else{
elements = par.getElementsByTagName('*');
}
}else if(typeof f === 'object' && f!=null){
elements = f.getElementsByTagName('*');
}else{
elements = [];
}
for(var i=0;i<elements.length;i++){
if(/\s/.test(elements[i].className)){
var names = elements[i].className.split(' ');
if(strComper(s.substring(1),names) === true){
result.push(elements[i]);
}
}else{
if(elements[i].className == s.substring(1)){
result.push(elements[i]);
}
}
}
}else{
if(typeof f === 'string'){
var par = document.getElementById(f.substring(1));
if(!par){
return result;
}
result = document.getElementById(f.substring(1)).getElementsByTagName(s);
}else if(typeof f === 'object'){
result = f.getElementsByTagName(s);
}
}
return result;
};
function scrollTab(){
var uls=document.getElementById('playbox');
var lis=uls.getElementsByTagName('li');
var next=document.getElementById('btn_left');
var prve=document.getElementById('btn_right');
var playTab=document.getElementById('playtab');
var nowleft=0;
var left=0;
var timer = null;
uls.innerHTML+=uls.innerHTML;
uls.style.width=lis[0].offsetWidth*lis.length+"px";
prve.onclick=function(){
nowleft-=lis[0].offsetWidth;
doMove(uls,nowleft);
};
next.onclick=function(){
nowleft+=lis[0].offsetWidth;
doMove(uls,nowleft);
};
playTab.onmouseover = uls.onmouseover = function(){
clearInterval(timer);
}
playTab.onmouseout = uls.onmouseout = function(){
timer = setInterval(prve.onclick,3000);
}
function doMove(obj,target){
if(obj.timer){clearInterval(obj.timer);}
obj.timer=setInterval(function (){
goMove(obj,target);
}, 30);
}
function goMove(obj,target){
var iSpeed=(target-left)/5;
iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);
left+=iSpeed;
obj.style.left=thisleft(left)+'px';
};
function thisleft(left){
return left-(uls.offsetWidth/2)*Math.ceil(left/(uls.offsetWidth/2));
};
var timer = setInterval(prve.onclick,3000);
(function(){
var onBg = getEle('#playbox','.onbgs');
for(var i=0;i<onBg.length;i++){
onBg[i].onmouseover = function(){
this.className = 'onbgs2';
}
onBg[i].onmouseout = function(){
this.className = 'onbgs';
}
}
})();
};
</script>
<style>
body,textarea,input,select,option {font-size:12px;color:#333;font-family:'Microsoft Yahei',Tahoma,Arial,sans-serif;}h1,h2,h3,h4,h5,h6 {font-size:100%;}body,h1,h2,h3,h4,h5,h6,blockquote,ol,ul,dl,dd,p,textarea,input,select,option,form {margin:0;}ol,ul,textarea,input,option,th,td {padding:0;}table {border-collapse:collapse;}li {list-style-type:none;}.clears:before,.clears:after {content:'';display:table;}.clears:after {clear:both;}.clears {*zoom:1;}a {text-decoration:none;color:#333;}a,textarea,input,select {outline:none}textarea {overflow:auto;resize:none;}.img img {display:block;}a img {border:none;}.pr {position:relative;}.pa {position:absolute;}.fl {float:left;}.fr {float:right;}
a:hover{text-decoration:underline;}
.t20 {margin-top:20px;}
.m960 {margin:0 auto;width:960px;}
.fr{float:right;}
.h2 {height:32px;padding-bottom:3px;overflow:hidden;}
.h2 b {font-weight:normal;float:left;padding-top:2px;font-size:22px;color:#f971b1;line-height:26px;}
.h2 strong {font-weight:normal;float:left;height:28px;line-height:28px;font-size:18px;}
.playtab {height:16px;overflow:hidden;padding:9px 5px 0 0;width:40px;}
.playtab a {width:16px;height:16px;cursor:pointer;background:url(img/icobg.png) no-repeat;}
.playtab #btn_left {background-position:-204px 0;float:left;}
.playtab #btn_right {background-position:-222px 0;float:right;}
.playboxdiv {width:960px;height:491px;overflow:hidden;position:relative;}
.playbox {position:absolute;left:0;top:0;}
.playbox li {width:960px;height:491px;overflow:hidden;float:left;}
.playbox li .playli {float:left;height:484px;width:310px;background:url(img/icobg2.png) no-repeat 0 bottom;margin-right:15px;_display:inline;padding-bottom:7px;}
.playbox li .playli .h3 {position:relative;width:308px;height:34px;padding-top:7px;border:1px solid #e6e5e5;border-bottom:none;}
.playbox li .playli .h3 b {position:absolute;left:-1px;bottom:0;width:310px;height:2px;overflow:hidden;}
.playbox li .playli .h3 h2 {font-weight:normal;margin-left:14px;padding-top:2px;height:30px;line-height:30px;padding-left:42px;font-size:16px;background:url(img/icobg.png) no-repeat;}
.playbox li .playli .h3 .bgreen {background-color:#7cca51;}
.playbox li .playli .h3 .h2green {color:#7cca51;background-position:-368px -108px;}
.playbox li .playli .h3 .bzis {background-color:#dd8ee5;}
.playbox li .playli .h3 .h2zis {color:#dd8ee5;background-position:-368px -140px;}
.playbox li .playli .h3 .bchengs {background-color:#efa16f;}
.playbox li .playli .h3 .h2chengs {color:#efa16f;background-position:-368px -172px;}
.playbox li .playli .h3 .bfens {background-color:#f18fb1;}
.playbox li .playli .h3 .h2fens {color:#f18fb1;background-position:-368px -204px;}
.playbox li .playli .h3 .bzhongs {background-color:#eda276;}
.playbox li .playli .h3 .h2zhongs {color:#eda276;background-position:-368px -236px;}
.playbox li .playli .h3 .blans {background-color:#aba0e7;}
.playbox li .playli .h3 .h2lans {color:#aba0e7;background-position:-368px -268px;}
.playbox li .playli .h3 .bfen2s {background-color:#ec77c7;}
.playbox li .playli .h3 .h2fen2s {color:#ec77c7;background-position:-368px -300px;}
.playbox li .playli .h3 .bhongs {background-color:#f4898c;}
.playbox li .playli .h3 .h2hongs {color:#f4898c;background-position:-368px -332px;}
.playbox li .playli .h3 .bzhong2s {background-color:#ce806a;}
.playbox li .playli .h3 .h2zhong2s {color:#ce806a;background-position:-368px -364px;}
.playbox li .playli dl {width:308px;border-left:1px solid #e6e5e5;border-right:1px solid #e6e5e5;border-top:1px solid #f0f0f0;height:441px;background-color:#f8f8f8;}
.playbox li .playli dl dt {background-color:#f8f8f8;height:100px;padding:7px 14px 10px;width:280px;overflow:hidden;}
.playbox li .playli dl .onbgs {background-color:#f8f8f8;}
.playbox li .playli dl .onbgs2 {background-color:#fff;}
.playbox li .playli dl dt .aplayimg {float:left;width:120px;height:100px;}
.playbox li .playli dl dt .aplayimg img {display:block;width:120px;height:100px;}
.playbox li .playli dl dt p {float:left;width:150px;padding-left:10px;}
.playbox li .playli dl dt p .ah3 {display:block;height:24px;line-height:24px;font-size:14px;}
.playbox li .playli dl dt p span {display:block;background:url(img/icobg3.png) no-repeat 0 0;height:12px;line-height:12px;color:#666;padding-left:19px;margin:10px 0 0;}
.playbox li .playli dl dt p cite {font-style:normal;display:block;height:44px;overflow:hidden;padding-top:14px;line-height:22px;color:#666;}
.playbox li .playli dl dd {background-color:#f8f8f8;height:69px;padding:0px 14px 9px;width:280px;overflow:hidden;}
.playbox li .playli dl dd i {display:block;height:9px;width:280px;overflow:hidden;border-top:1px solid #ececec;}
.playbox li .playli dl dd .aplayimg2 {float:left;width:60px;height:60px;}
.playbox li .playli dl dd .aplayimg2 img {display:block;width:60px;height:60px;}
.playbox li .playli dl dd p {float:left;width:210px;padding-left:10px;}
.playbox li .playli dl dd p .ah3 {display:block;height:20px;line-height:20px;font-size:12px;}
.playbox li .playli dl dd p var {padding-left:17px;display:block;font-style:normal;height:14px;line-height:14px;color:#666;margin:5px 0 0;background:url(img/icobg3.png) no-repeat 0 -14px;}
.playbox li .playli dl dd p span {width:61px;float:left;background:url(img/icobg3.png) no-repeat;height:12px;line-height:12px;color:#666;padding-left:19px;margin:8px 0 0;}
.playbox li .playli dl dd p .span1 {background-position:0 0;}
.playbox li .playli dl dd p .span2 {background-position:0 -29px;}
.playbox li .playli dl dd p cite {font-style:normal;float:left;width:201px;height:22px;overflow:hidden;padding-top:2px;line-height:22px;color:#666;}
.agent {width:960px;}
</style>
</head>

<body>
<div class="m960 t20">
    <div class="h2 clears">
<b style="color:#7baaf7;">PLAY</b><strong>看看大家都在玩什么</strong>
<ol id="playtab" class="fr playtab">
<a href="javascript:void(0)" id="btn_left" title="上一屏" hidefocus="true"></a>
<a href="javascript:void(0)" id="btn_right" title="下一屏" hidefocus="true"></a>
</ol>
</div>

    <div class="playboxdiv">
<ul class="playbox clears" id="playbox">
<li>
<div class="playli">
<div class="h3">
<h2 class="h2green">靓女点歌</h2>
<b class="bgreen"></b>
</div>
<dl>



<dt class="onbgs"><a class="aplayimg" href="http://v.guagua.cn/228833.html" target="_blank" title=""><img src="img/1301091843230790.gif" alt="呱呱视频"/></a>
<p><a href="http://v.guagua.cn/228833.html" target="_blank" class="ah3" title="">蓝色妖姬点歌台</a><span>228833</span><cite title="我为自己的心感到骄傲,它曾受玩弄,曾经心焦,曾遭破碎,却依然鲜活跳动。">简介:我为自己的心感到骄傲,它曾受玩弄,曾经心焦,曾遭破碎,却依然鲜活跳动。</cite></p>
</dt>



<dd class="onbgs"> <i></i> <a  href="http://v.guagua.cn/222225.html" target="_blank" class="aplayimg2" title=""><img src="img/1301091843230790.gif" alt=""/></a>
<p> <a  href="http://v.guagua.cn/222225.html" target="_blank" class="ah3" title="">相依相伴点歌台</a> <var>专业接待贵宾</var> <span class="span1">222225</span> <span class="span2">2133</span> </p>
</dd>



<dd class="onbgs"> <i></i> <a  href="http://v.guagua.cn/220011.html" target="_blank" class="aplayimg2" title=""><img src="img/1301091843230790.gif" alt=""/></a>
<p> <a  href="http://v.guagua.cn/220011.html" target="_blank" class="ah3" title="">红乐坊点歌台</a> <var>开心妹</var> <span class="span1">220011</span> <span class="span2">3785</span> </p>
</dd>



<dd class="onbgs"> <i></i> <a  href="http://v.guagua.cn/228899.html" target="_blank" class="aplayimg2" title=""><img src="img/1301091843230790.gif" alt=""/></a>
<p> <a  href="http://v.guagua.cn/228899.html" target="_blank" class="ah3" title="">红粉知己点歌台</a> <var>心◇晴【红粉知己】</var> <span class="span1">228899</span> <span class="span2">3188</span> </p>
</dd>



<dd class="onbgs"> <i></i> <a  href="http://v.guagua.cn/220011.html" target="_blank" class="aplayimg2" title=""><img src="img/1301091843230790.gif" alt=""/></a>
<p> <a  href="http://v.guagua.cn/220011.html" target="_blank" class="ah3" title="">红乐坊点歌台</a> <var>醉儿『红乐坊点歌』</var> <span class="span1">220011</span> <span class="span2">3817</span> </p>
</dd>



</dl>
</div>
<div class="playli">
<div class="h3">
<h2 class="h2zis">炫舞秀场</h2>
<b class="bzis"></b>
</div>
<dl>



<dt class="onbgs"><a class="aplayimg" href="http://v.guagua.cn/321801.html" target="_blank" title=""><img src="img/1301091843230790.gif" alt=""/></a>
<p><a href="http://v.guagua.cn/321801.html" target="_blank" class="ah3" title="">中國≤神聖≥美女酒</a><span>321801</span><cite title="我们每个人都是梦想家,当梦走了就只剩想家了。">简介:我们每个人都是梦想家,当梦走了就只剩想家了。</cite></p>
</dt>



<dd class="onbgs"> <i></i> <a  href="http://v.guagua.cn/226237.html" target="_blank" class="aplayimg2" title=""><img src="img/1301091843230790.gif" alt=""/></a>
<p> <a  href="http://v.guagua.cn/226237.html" target="_blank" class="ah3" title="">英雄美女歌舞会所</a> <var>【官方代理】寵児</var> <span class="span1">226237</span> <span class="span2">4355</span> </p>
</dd>



<dd class="onbgs"> <i></i> <a  href="http://v.guagua.cn/232425.html" target="_blank" class="aplayimg2" title=""><img src="img/1301091843230790.gif" alt=""/></a>
<p> <a  href="http://v.guagua.cn/232425.html" target="_blank" class="ah3" title="">◥◣郎的诱惑◢◤</a> <var>▓官方经纪人▓丝丝</var> <span class="span1">232425</span> <span class="span2">3761</span> </p>
</dd>



<dd class="onbgs"> <i></i> <a  href="http://v.guagua.cn/207429.html" target="_blank" class="aplayimg2" title=""><img src="img/1301091843230790.gif" alt=""/></a>
<p> <a  href="http://v.guagua.cn/207429.html" target="_blank" class="ah3" title="">〓苍穹★魅力传说〓</a> <var>【官方代理】土豆</var> <span class="span1">207429</span> <span class="span2">1247</span> </p>
</dd>



<dd class="onbgs"> <i></i> <a  href="http://v.guagua.cn/320781.html" target="_blank" class="aplayimg2" title=""><img src="img/1301091843230790.gif" alt=""/></a>
<p> <a  href="http://v.guagua.cn/320781.html" target="_blank" class="ah3" title="">炫S钻石美女城</a> <var>【官方代理】教皇</var> <span class="span1">320781</span> <span class="span2">2120</span> </p>
</dd>



</dl>
</div>
<div class="playli" style="margin-right:0;">
<div class="h3">
<h2 class="h2chengs">美女聊吧</h2>
<b class="bchengs"></b>
</div>
<dl>



<dt class="onbgs"><a class="aplayimg" href="http://v.guagua.cn/333386.html" target="_blank" title=""><img src="img/1301091843230790.gif" alt=""/></a>
<p><a href="http://v.guagua.cn/333386.html" target="_blank" class="ah3" title="">高校◆学院派美女聊</a><span>333386</span><cite title="喜欢就争取,得到就珍惜,错过就忘记,生活其实就这么简单。">简介:喜欢就争取,得到就珍惜,错过就忘记,生活其实就这么简单。</cite></p>
</dt>



<dd class="onbgs"> <i></i> <a  href="http://v.guagua.cn/333388.html" target="_blank" class="aplayimg2" title=""><img src="img/1301091843230790.gif" alt=""/></a>
<p> <a  href="http://v.guagua.cn/333388.html" target="_blank" class="ah3" title="">夜色撩人MM聊吧</a> <var>【夜色经纪人】虫虫</var> <span class="span1">333388</span> <span class="span2">5579</span> </p>
</dd>



<dd class="onbgs"> <i></i> <a  href="http://v.guagua.cn/333380.html" target="_blank" class="aplayimg2" title=""><img src="img/1301091843230790.gif" alt=""/></a>
<p> <a  href="http://v.guagua.cn/333380.html" target="_blank" class="ah3" title="">㈨号公馆激情聊吧</a> <var>蝶子。</var> <span class="span1">333380</span> <span class="span2">8315</span> </p>
</dd>



<dd class="onbgs"> <i></i> <a  href="http://v.guagua.cn/333399.html" target="_blank" class="aplayimg2" title=""><img src="img/1301091843230790.gif" alt=""/></a>
<p> <a  href="http://v.guagua.cn/333399.html" target="_blank" class="ah3" title="">皇朝迷情酒吧</a> <var>【官方代理】倾城</var> <span class="span1">333399</span> <span class="span2">3467</span> </p>
</dd>



<dd class="onbgs"> <i></i> <a  href="http://v.guagua.cn/333398.html" target="_blank" class="aplayimg2" title=""><img src="img/1301091843230790.gif" alt=""/></a>
<p> <a  href="http://v.guagua.cn/333398.html" target="_blank" class="ah3" title="">VIP美女调情酒吧</a> <var>【山东一级代理】幽幽</var> <span class="span1">333398</span> <span class="span2">4430</span> </p>
</dd>



</dl>
</div>
</li>
<li>
<div class="playli">
<div class="h3">
<h2 class="h2fens">同城交友</h2>
<b class="bfens"></b>
</div>
<dl>



<dt class="onbgs"><a class="aplayimg" href="http://v.guagua.cn/332332.html" target="_blank" title=""><img src="img/1301091843230790.gif" alt=""/></a>
<p><a href="http://v.guagua.cn/332332.html" target="_blank" class="ah3" title="">二人转艺术团</a><span>332332 </span><cite title="丰富房间活动内容,充分展示团队风貌,互相交流学习提高,增进区域之间友谊。">简介:丰富房间活动内容,充分展示团队风貌,互相交流学习提高,增进区域之间友谊。</cite></p>
</dt>



<dd class="onbgs"> <i></i> <a  href="http://v.guagua.cn/300419.html" target="_blank" class="aplayimg2" title=""><img src="img/1301091843230790.gif" alt=""/></a>
<p> <a  href="http://v.guagua.cn/300419.html" target="_blank" class="ah3" title="">相聚北京【精品】</a> <var>★相聚北京★盟军</var> <span class="span1">300419</span> <span class="span2">1235</span> </p>
</dd>



<dd class="onbgs"> <i></i> <a  href="http://v.guagua.cn/290078.html" target="_blank" class="aplayimg2" title=""><img src="img/1301091843230790.gif" alt=""/></a>
<p> <a  href="http://v.guagua.cn/290078.html" target="_blank" class="ah3" title="">江西</a> <var>→お恋你☆亂了→お</var> <span class="span1">290078</span> <span class="span2">4323</span> </p>
</dd>



<dd class="onbgs"> <i></i> <a  href="http://v.guagua.cn/290071.html" target="_blank" class="aplayimg2" title=""><img src="img/1301091843230790.gif" alt=""/></a>
<p> <a  href="http://v.guagua.cn/290071.html" target="_blank" class="ah3" title="">山东</a> <var>≮山★東≯阳光王子挂</var> <span class="span1">290071</span> <span class="span2">7423</span> </p>
</dd>



<dd class="onbgs"> <i></i> <a  href="http://v.guagua.cn/241413.html" target="_blank" class="aplayimg2" title=""><img src="img/1301091843230790.gif" alt=""/></a>
<p> <a  href="http://v.guagua.cn/241413.html" target="_blank" class="ah3" title="">028-成都</a> <var>简 ☆ 爱|▍</var> <span class="span1">241413</span> <span class="span2">7856</span> </p>
</dd>



</dl>
</div>
<div class="playli">
<div class="h3">
<h2 class="h2zhongs">网舞健身</h2>
<b class="bzhongs"></b>
</div>
<dl>



<dt class="onbgs"><a class="aplayimg" href="http://v.guagua.cn/320983.html" target="_blank" title=""><img src="img/1301091843230790.gif" alt=""/></a>
<p><a href="http://v.guagua.cn/320983.html" target="_blank" class="ah3" title="">冷魔魔摇吧</a><span>320983</span><cite title="朋友不是先来的人或者认识最久的人,而是那个来了以后再也没有走的人。">简介:朋友不是先来的人或者认识最久的人,而是那个来了以后再也没有走的人。</cite></p>
</dt>



<dd class="onbgs"> <i></i> <a  href="http://v.guagua.cn/325716.html" target="_blank" class="aplayimg2" title=""><img src="img/1301091843230790.gif" alt=""/></a>
<p> <a  href="http://v.guagua.cn/325716.html" target="_blank" class="ah3" title="">烟虫舞蹈学院 </a> <var>【【烟虫】】</var> <span class="span1">325716</span> <span class="span2">5633</span> </p>
</dd>



<dd class="onbgs"> <i></i> <a  href="http://v.guagua.cn/321469.html" target="_blank" class="aplayimg2" title=""><img src="img/1301091843230790.gif" alt=""/></a>
<p> <a  href="http://v.guagua.cn/321469.html" target="_blank" class="ah3" title="">聚友炫嗨吧</a> <var>┈╁JY炫嗨★埅盜鍆挂</var> <span class="span1">321469</span> <span class="span2">5423</span> </p>
</dd>



<dd class="onbgs"> <i></i> <a  href="http://v.guagua.cn/326480.html" target="_blank" class="aplayimg2" title=""><img src="img/1301091843230790.gif" alt=""/></a>
<p> <a  href="http://v.guagua.cn/326480.html" target="_blank" class="ah3" title="">石头舞蹈学院总部</a> <var>━≡石〓头≡━</var> <span class="span1">326480</span> <span class="span2">5542</span> </p>
</dd>



<dd class="onbgs"> <i></i> <a  href="http://v.guagua.cn/321155.html" target="_blank" class="aplayimg2" title=""><img src="img/1301091843230790.gif" alt=""/></a>
<p> <a  href="http://v.guagua.cn/321155.html" target="_blank" class="ah3" title="">舞静网舞培训【全视频】</a> <var>【魅力室主】 舞静</var> <span class="span1">321155 </span> <span class="span2">2343</span> </p>
</dd>



</dl>
</div>
<div class="playli" style="margin-right:0;">
<div class="h3">
<h2 class="h2lans">成熟话题</h2>
<b class="blans"></b>
</div>
<dl>



<dt class="onbgs"><a class="aplayimg" href="http://v.guagua.cn/241007.html" target="_blank" title=""><img src="img/1301091843230790.gif" alt=""/></a>
<p><a href="http://v.guagua.cn/241007.html" target="_blank" class="ah3" title="">非常红颜知己</a><span>241007</span><cite title="最大的悲哀莫过于长大,从此,笑不再纯碎,哭不再彻底。">简介:最大的悲哀莫过于长大,从此,笑不再纯碎,哭不再彻底。</cite></p>
</dt>



<dd class="onbgs"> <i></i> <a  href="http://v.guagua.cn/312404.html" target="_blank" class="aplayimg2" title=""><img src="img/1301091843230790.gif" alt=""/></a>
<p> <a  href="http://v.guagua.cn/312404.html" target="_blank" class="ah3" title="">私情蜜语</a> <var>◇美丽◇〖酒窝〗</var> <span class="span1">312404</span> <span class="span2">5656</span> </p>
</dd>



<dd class="onbgs"> <i></i> <a  href="http://v.guagua.cn/241081.html" target="_blank" class="aplayimg2" title=""><img src="img/1301091843230790.gif" alt=""/></a>
<p> <a  href="http://v.guagua.cn/241081.html" target="_blank" class="ah3" title="">成熟诱惑</a> <var>南妃儿</var> <span class="span1">241081 </span> <span class="span2">45423</span> </p>
</dd>



<dd class="onbgs"> <i></i> <a  href="http://v.guagua.cn/241360.html" target="_blank" class="aplayimg2" title=""><img src="img/1301091843230790.gif" alt=""/></a>
<p> <a  href="http://v.guagua.cn/241360.html" target="_blank" class="ah3" title="">疯狂男女俱乐部</a> <var>~*~默 然</var> <span class="span1">241360 </span> <span class="span2">45234</span> </p>
</dd>



<dd class="onbgs"> <i></i> <a  href="http://v.guagua.cn/314059.html" target="_blank" class="aplayimg2" title=""><img src="img/1301091843230790.gif" alt=""/></a>
<p> <a  href="http://v.guagua.cn/314059.html" target="_blank" class="ah3" title="">寂寞的我</a> <var>≮寂寞≯★左岸</var> <span class="span1">314059 </span> <span class="span2">56733</span> </p>
</dd>



</dl>
</div>
</li>
<li>
<div class="playli">
<div class="h3">
<h2 class="h2fen2s">朗诵艺术</h2>
<b class="bfen2s"></b>
</div>
<dl>



<dt class="onbgs"><a class="aplayimg" href="http://v.guagua.cn/318932.html" target="_blank" title=""><img src="img/1301091843230790.gif" alt=""/></a>
<p><a href="http://v.guagua.cn/318932.html" target="_blank" class="ah3" title="">醉竹清风朗诵苑</a><span>318932</span><cite title="用清晰的语言,响亮的声音,优美的体态,引入的动作以传达诗歌的思想内容,以引起听众的共鸣。">简介:用清晰的语言,响亮的声音,优美的体态,引入的动作以传达诗歌的思想内容,以引起听众的共鸣。</cite></p>
</dt>



<dd class="onbgs"> <i></i> <a  href="http://v.guagua.cn/334899.html" target="_blank" class="aplayimg2" title=""><img src="img/1301091843230790.gif" alt=""/></a>
<p> <a  href="http://v.guagua.cn/334899.html" target="_blank" class="ah3" title="">临泉吟月【朗诵】</a> <var>【工作】老 塞</var> <span class="span1">334899</span> <span class="span2">10543</span> </p>
</dd>



<dd class="onbgs"> <i></i> <a  href="http://v.guagua.cn/381116.html" target="_blank" class="aplayimg2" title=""><img src="img/1301091843230790.gif" alt=""/></a>
<p> <a  href="http://v.guagua.cn/381116.html" target="_blank" class="ah3" title="">朗诵之声</a> <var>云上太阳</var> <span class="span1">381116</span> <span class="span2">7513</span> </p>
</dd>



<dd class="onbgs"> <i></i> <a  href="http://v.guagua.cn/314508.html" target="_blank" class="aplayimg2" title=""><img src="img/1301091843230790.gif" alt=""/></a>
<p> <a  href="http://v.guagua.cn/314508.html" target="_blank" class="ah3" title="">网络文学经典</a> <var>苦咖啡</var> <span class="span1">314508</span> <span class="span2">4351</span> </p>
</dd>



<dd class="onbgs"> <i></i> <a  href="http://v.guagua.cn/310111.html" target="_blank" class="aplayimg2" title=""><img src="img/1301091843230790.gif" alt=""/></a>
<p> <a  href="http://v.guagua.cn/310111.html" target="_blank" class="ah3" title="">风雅颂</a> <var>蓝诺</var> <span class="span1">310111</span> <span class="span2">2456</span> </p>
</dd>



</dl>
</div>
<div class="playli">
<div class="h3">
<h2 class="h2hongs">器乐交流</h2>
<b class="bhongs"></b>
</div>
<dl>



<dt class="onbgs"><a class="aplayimg" href="http://v.guagua.cn/340624.html" target="_blank" title=""><img src="img/1301091843230790.gif" alt=""/></a>
<p><a href="http://v.guagua.cn/340624.html" target="_blank" class="ah3" title="">中国二胡</a><span>340624 </span><cite title="弘扬民乐,展示才艺,牵手呱呱,尽情娱乐。">简介:弘扬民乐,展示才艺,牵手呱呱,尽情娱乐。</cite></p>
</dt>



<dd class="onbgs"> <i></i> <a  href="http://v.guagua.cn/239499.html" target="_blank" class="aplayimg2" title=""><img src="img/1301091843230790.gif" alt=""/></a>
<p> <a  href="http://v.guagua.cn/239499.html" target="_blank" class="ah3" title="">竹楼情歌-葫芦丝</a> <var>〖竹楼〗碧 ☆ 涵</var> <span class="span1">239499 </span> <span class="span2">7437</span> </p>
</dd>



<dd class="onbgs"> <i></i> <a  href="http://v.guagua.cn/407936.html" target="_blank" class="aplayimg2" title=""><img src="img/1301091843230790.gif" alt=""/></a>
<p> <a  href="http://v.guagua.cn/407936.html" target="_blank" class="ah3" title="">口琴百花园</a> <var>【教师团队】天南海北</var> <span class="span1">407936 </span> <span class="span2">2342</span> </p>
</dd>



<dd class="onbgs"> <i></i> <a  href="http://v.guagua.cn/388806.html" target="_blank" class="aplayimg2" title=""><img src="img/1301091843230790.gif" alt=""/></a>
<p> <a  href="http://v.guagua.cn/388806.html" target="_blank" class="ah3" title="">天空葫芦丝巴乌教学</a> <var>【tk葫芦】天空</var> <span class="span1">388806 </span> <span class="span2">7232</span> </p>
</dd>



<dd class="onbgs"> <i></i> <a  href="http://v.guagua.cn/361006.html" target="_blank" class="aplayimg2" title=""><img src="img/1301091843230790.gif" alt=""/></a>
<p> <a  href="http://v.guagua.cn/361006.html" target="_blank" class="ah3" title="">雅韵葫芦丝</a> <var>【雅韵】☆閖晶梨£ゞ</var> <span class="span1">361006 </span> <span class="span2">7522</span> </p>
</dd>



</dl>
</div>
<div class="playli" style="margin-right:0;">
<div class="h3">
<h2 class="h2zhong2s">戏曲梨园</h2>
<b class="bzhong2s"></b>
</div>
<dl>



<dt class="onbgs"><a class="aplayimg" href="http://v.guagua.cn/311615.html" target="_blank" title=""><img src="img/1301091843230790.gif" alt=""/></a>
<p><a href="http://v.guagua.cn/311615.html" target="_blank" class="ah3" title="">京剧之家</a><span>311615</span><cite title="起源于中国古老戏剧秦腔、徽剧、昆曲及汉剧。它的行当全面、表演成熟、气势宏美,是近代中国汉族戏曲的代表。 ">简介:起源于中国古老戏剧秦腔、徽剧、昆曲及汉剧。它的行当全面、表演成熟、气势宏美,是近代中国汉族戏曲的代表。 </cite></p>
</dt>



<dd class="onbgs"> <i></i> <a  href="http://v.guagua.cn/318805.html" target="_blank" class="aplayimg2" title=""><img src="img/1301091843230790.gif" alt=""/></a>
<p> <a  href="http://v.guagua.cn/318805.html" target="_blank" class="ah3" title="">评剧茶座</a> <var>【评剧★室主】戏迷 </var> <span class="span1">318805</span> <span class="span2">3561</span> </p>
</dd>



<dd class="onbgs"> <i></i> <a  href="http://v.guagua.cn/312595.html" target="_blank" class="aplayimg2" title=""><img src="img/1301091843230790.gif" alt=""/></a>
<p> <a  href="http://v.guagua.cn/312595.html" target="_blank" class="ah3" title="">情系越剧</a> <var>【情系越剧】燕子</var> <span class="span1">312595</span> <span class="span2">7551</span> </p>
</dd>



<dd class="onbgs"> <i></i> <a  href="http://v.guagua.cn/311538.html" target="_blank" class="aplayimg2" title=""><img src="img/1301091843230790.gif" alt=""/></a>
<p> <a  href="http://v.guagua.cn/311538.html" target="_blank" class="ah3" title="">黄梅戏苑</a> <var>【黄梅戏苑】玉梅</var> <span class="span1">311538</span> <span class="span2">16912</span> </p>
</dd>



<dd class="onbgs"> <i></i> <a  href="http://v.guagua.cn/311526.html" target="_blank" class="aplayimg2" title=""><img src="img/1301091843230790.gif" alt=""/></a>
<p> <a  href="http://v.guagua.cn/311526.html" target="_blank" class="ah3" title="">戏曲大舞台</a> <var>【戏曲室主】梨园</var> <span class="span1">311526</span> <span class="span2">13321</span> </p>
</dd>



</dl>
</div>
</li>
</ul>
</div>

<script>scrollTab();</script>
<script type="text/javascript" src="js/jquery1.4.js"></script>
    </div>
</body>
</html>

声明:此文系舞林cuznwww.wulinlw.org)原创稿件,转载请保留版权

jqGrid例子

Continue Read..

html:
<table id="grid-table"></table>
<div id="grid-pager"></div>

js引入:
<script src="../assets/js/jqGrid/jquery.jqGrid.src.js"></script>
<script src="../assets/js/jqGrid/i18n/grid.locale-cn.js"></script>

js脚本:
<script type="text/javascript">
jQuery(function($) {
var grid_selector = "#grid-table";
var pager_selector = "#grid-pager";
var pageNum = 1;
var pageSize=10;
var totalPageNum=0;
var totalNum=0;
var datarow=null;

//查询
var brandCode="";
var brandName="";
//resize to fit page size
$(window).on('resize.jqGrid', function () {
$(grid_selector).jqGrid( 'setGridWidth', $(".page-content").width() );
   })
//resize on sidebar collapse/expand
var parent_column = $(grid_selector).closest('[class*="col-"]');
$(document).on('settings.ace.jqGrid' , function(ev, event_name, collapsed) {
if( event_name === 'sidebar_collapsed' || event_name === 'main_container_fixed' ) {
//setTimeout is for webkit only to give time for DOM changes and then redraw!!!
setTimeout(function() {
$(grid_selector).jqGrid( 'setGridWidth', parent_column.width() );
}, 0);
}
   })
jQuery(grid_selector).jqGrid({
//subgrid options
subGrid : false,
data: getJson(brandCode,brandName),
datatype: "local",
height: 410,
colNames:[' ','主键','品牌编码','品牌名称'],//'创建人',
colModel:[
{name:'myac',index:'', width:70,fixed:true, sortable:false, resize:false,
formatter:'actions', 
formatoptions:{ 
//keys:true,
editformbutton:true,
editOptions:{
width: 500,
// height:260,
top:130,
left:450,
viewPagerButtons: false,
recreateForm: true,
beforeShowForm : function(e) {
var form = $(e[0]);
form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar')
.wrapInner('<div class="widget-header" />')
style_edit_form(form);
},
beforeSubmit:function(response,postdata,oper){
beforeSubmit_edit(postdata,oper);
return false;
}
},
delOptions:{
recreateForm: true, 
beforeShowForm:beforeDeleteCallback,
beforeSubmit:function(){
DeleteById();
return false;
}
}

},
search:false
},
{name:'brandId',index:'brandId', width:100,editable: true,editoptions:{readonly:true}},
{name:'brandCode',index:'brandCode', width:200,editable: true,editoptions:{maxlength:"20"},editrules:{required:true}},
{name:'brandName',index:'brandName', width:100,editable: true,editoptions:{maxlength:"20"},editrules:{required:true}},
],
viewrecords : true,
rowNum:10,
rowList:[],
sortorder:'desc',
pager : pager_selector,
prmNames : {
id:"brandId"
},
jsonReader:{
root:"param",
           id: "brandId",//设置返回参数中,表格ID的名字为blackId
           //repeatitems : false
       },
       localReader: {// 
        root: function(obj) { return datarow; },   
                   page: function (obj) { return pageNum; },  
                   total: function (obj) { return totalPageNum; },  
                   records: function (obj) { return totalNum; },
                   //userdata: "userdata", 
                   repeatitems: false,  
                   id: "brandId"  
               },
//multiselect: true,
//multiboxonly: true,
loadComplete : function() {
var table = this;
setTimeout(function(){
updatePagerIcons(table);
enableTooltips(table);
}, 0);
},
gridComplete: function(){
               jQuery(grid_selector).hideCol(["brandId"]);//,"password"                
           },
editurl: "/ZHHTBoss/s1/brand/update",
caption: "品牌档案管理",
onPaging : function(but,s) {
          if(but == "next_grid-pager"){
          pageNum++;
          }else if(but == "prev_grid-pager"){
          pageNum--;
          }else if(but == "last_grid-pager"){
          var pagenumval=Number($("#sp_1_grid-pager").html().split(',').join(''));
          pageNum=pagenumval;
          }else if(but == "first_grid-pager"){
          pageNum = 1;
          }
        getJson(brandCode,brandName);
       }
});

$(window).triggerHandler('resize.jqGrid');//trigger window resize to make the grid get the correct size

//获取列表数据方法
function getJson(brandCode,brandName){
    var obj=null;
    var param_Field={
    "brandCode":brandCode,
    "brandName":brandName
    };
    $.ajax({
    url : '/ZHHTBoss/s1/brand/queryList',
    type : 'post',
    dataType:'json',
    async: false,//使用同步的方式,true为异步方式
    data : {'param':GetParam_Data(param_Field,pageNum,pageSize)},//这里使用json对象
    success : function(msg){
    if(msg.code=='0000'){
    totalNum=msg.total;
    totalPageNum=Math.ceil(totalNum/10);
    var rows=msg.data.BrandVO;
    var str="[";
    for(var i=0;i<rows.length;i++){
       str += "{\"brandId\":\""+rows[i].brandId+"\",\"brandCode\":\""+rows[i].brandCode+"\",\"brandName\":\""+rows[i].brandName+"\"},"
    }
    if(str.length>0&&str.substring(str.length-1, str.length)==','){
    str=str.substring(0, str.length-1); 
    }
    str+=']';
    obj = eval( "(" + str + ")" );//转换后的JSON对象
    datarow = eval( "(" + str + ")" );
   
    }else{
    alert(msg.msg);
    }
   
    },
    fail:function(){
    alert('网络异常,请稍后重试');
    },
    error:function(e){
    if(e.status==911){
    alert('登录失效,请重新登录');
window.location.href='login.html';
}
obj="";
    }
    });
     
    return obj;
   }
   //删除函数方法
   function DeleteById() {

var selectedId = $(grid_selector).jqGrid("getGridParam", "selrow");
var rowData = $(grid_selector).jqGrid("getRowData", selectedId);
var idStr="{'brandId':'"+rowData.brandId+"'}";

$.ajax({
    url : '/ZHHTBoss/s1/brand/delete',
    type : 'post',
    dataType:'json',
    async: false,//使用同步的方式,true为异步方式
    data : {'param':'{"data":'+idStr+'}'},//这里使用json对象
    success : function(msg){
    if(msg.code=='0000'){
    alert('删除成功');
    changePage('Brand_manage.html');
    }else{
    alert(msg.msg);
    }
     
    },
    fail:function(){
    alert('网络异常,请稍后重试');
    },
    error:function(e){
    if(e.status==911){
    alert('登录失效,请重新登录');
window.location.href='login.html';
}
    }
    });
}

//获取区域信息

//添加和编辑函数方法
function Add_EditForm(data,oper){
var url="";

if(oper=="edit"){
url="/ZHHTBoss/s1/brand/update";
}
else if(oper=="add"){
url="/ZHHTBoss/s1/brand/add";
}

$.ajax({
    url : url,
    type : 'post',
    dataType:'json',
    async: false,//使用同步的方式,true为异步方式
    data : {'param':GetParam_Data(data)},//{"param":JSON.stringify(param)},//这里使用json对象
    success : function(msg){
    if(msg.code=='0000'){
    alert("操作成功!")
    changePage('Brand_manage.html');
    }else{
    alert(msg.msg);
    }
    },
    fail:function(){
    alert('网络异常,请稍后重试');
    },
    error:function(e){
    if(e.status==911){
    alert('登录失效,请重新登录');
window.location.href='login.html';
}
    }
    });
}


function beforeSubmit_add(postdata,oper){
var data = postdata.serializeArray();
data=convertArray(data);
Add_EditForm(data,oper);
}

function beforeSubmit_edit(postdata,oper){
var data = postdata.serializeArray();
data=convertArray(data);
Add_EditForm(data,oper);
}

$("#searchInfo").click(function(){ 
pageNum = 1;
       brandCode = $("#brandCode").val(); 
       brandName = $("#brandName").val();
       var data=getJson(brandCode,brandName);
       $(grid_selector).jqGrid('setGridParam',{ 
           data:data,
           page:1 
       }).trigger("reloadGrid");
   });
//跳转到第几页
   $(".ui-pg-input").keyup(function(e){
    pageNum = $(".ui-pg-input").val();
    var count = $("#sp_1_grid-pager").html();
    if(!/^[1-9]\d*$/.test(pageNum)||Number(pageNum)>Number(count)){
    pageNum = 1;
    $(".ui-pg-input").val(pageNum);
    }
           });
   $("#viewInfo").click(function(){
    var gr = jQuery(grid_selector).jqGrid('getGridParam', 'selrow');
   if (gr != null){
     jQuery(grid_selector).jqGrid('viewGridRow', gr, {
       top:130,
       left:450,
       width:500,
       beforeShowForm: function(e){
var form = $(e[0]);
form.find('tr[id=tr_brandId]').hide();
}
     });
   }
   else{
     alert("请选择所要查询的行!");
   }
   });

   $("#addInfo").click(function(){
    jQuery(grid_selector).jqGrid('editGridRow', "new", {
   width: 500,
top:130,
left:450,
recreateForm: true,
viewPagerButtons: false,
reloadAfterSubmit:true,
beforeShowForm : function(e) {
var form = $(e[0]);
form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar')
.wrapInner('<div class="widget-header" />')
var dd = $(".ui-jqdialog").html();
style_add_form(form);
//添加
},
beforeSubmit:function(response,postdata,oper){
beforeSubmit_add(postdata,oper);
return false;
}
   });
   });
function convertArray(o) { //主要是推荐这个函数。它将jquery系列化后的值转为name:value的形式。 
var v = {}; 
for (var i in o) { 
if (typeof (v[o[i].name]) == 'undefined') v[o[i].name] = o[i].value; 
else v[o[i].name] += "," + o[i].value; 
return v; 
function style_edit_form(form) {
var buttons = form.next().find('.EditButton .fm-button');
buttons.addClass('btn btn-sm').find('[class*="-icon"]').hide();//ui-icon, s-icon
buttons.eq(0).addClass('btn-primary').prepend('<i class="ace-icon fa fa-check"></i>');
buttons.eq(1).prepend('<i class="ace-icon fa fa-times"></i>')
buttons = form.next().find('.navButton a');
buttons.find('.ui-icon').hide();
buttons.eq(0).append('<i class="ace-icon fa fa-chevron-left"></i>');
buttons.eq(1).append('<i class="ace-icon fa fa-chevron-right"></i>');
}

function style_add_form(form) {
var buttons = form.next().find('.EditButton .fm-button');
buttons.addClass('btn btn-sm').find('[class*="-icon"]').hide();//ui-icon, s-icon
buttons.eq(0).addClass('btn-primary').prepend('<i class="ace-icon fa fa-check"></i>');
buttons.eq(1).prepend('<i class="ace-icon fa fa-times"></i>')
buttons = form.next().find('.navButton a');
buttons.find('.ui-icon').hide();
buttons.eq(0).append('<i class="ace-icon fa fa-chevron-left"></i>');
buttons.eq(1).append('<i class="ace-icon fa fa-chevron-right"></i>');
}
function style_delete_form(form) {
var buttons = form.next().find('.EditButton .fm-button');
buttons.addClass('btn btn-sm btn-white btn-round').find('[class*="-icon"]').hide();//ui-icon, s-icon
buttons.eq(0).addClass('btn-danger').prepend('<i class="ace-icon fa fa-trash-o"></i>');
buttons.eq(1).addClass('btn-default').prepend('<i class="ace-icon fa fa-times"></i>')
}
function style_search_filters(form) {
form.find('.delete-rule').val('X');
form.find('.add-rule').addClass('btn btn-xs btn-primary');
form.find('.add-group').addClass('btn btn-xs btn-success');
form.find('.delete-group').addClass('btn btn-xs btn-danger');
}
function style_search_form(form) {
var dialog = form.closest('.ui-jqdialog');
var buttons = dialog.find('.EditTable')
buttons.find('.EditButton a[id*="_reset"]').addClass('btn btn-sm btn-info').find('.ui-icon').attr('class', 'ace-icon fa fa-retweet');
buttons.find('.EditButton a[id*="_query"]').addClass('btn btn-sm btn-inverse').find('.ui-icon').attr('class', 'ace-icon fa fa-comment-o');
buttons.find('.EditButton a[id*="_search"]').addClass('btn btn-sm btn-purple').find('.ui-icon').attr('class', 'ace-icon fa fa-search');
}
function beforeDeleteCallback(e) {
var form = $(e[0]);
if(form.data('styled')) return false;
form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar').wrapInner('<div class="widget-header" />')
style_delete_form(form);
form.data('styled', true); 
}
function beforeEditCallback(e) {
var form = $(e[0]);
form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar').wrapInner('<div class="widget-header" />')
style_edit_form(form);
}
function updatePagerIcons(table) {
var replacement = 
{
'ui-icon-seek-first' : 'ace-icon fa fa-angle-double-left bigger-140',
'ui-icon-seek-prev' : 'ace-icon fa fa-angle-left bigger-140',
'ui-icon-seek-next' : 'ace-icon fa fa-angle-right bigger-140',
'ui-icon-seek-end' : 'ace-icon fa fa-angle-double-right bigger-140'
};
$('.ui-pg-table:not(.navtable) > tbody > tr > .ui-pg-button > .ui-icon').each(function(){
var icon = $(this);
var $class = $.trim(icon.attr('class').replace('ui-icon', ''));
if($class in replacement) icon.attr('class', 'ui-icon '+replacement[$class]);
})
}
function enableTooltips(table) {
$('.navtable .ui-pg-button').tooltip({container:'body'});
$(table).find('.ui-pg-div').tooltip({container:'body'});
}
$(document).one('ajaxloadstart.page', function(e) {
$(grid_selector).jqGrid('GridUnload');
$('.ui-jqdialog').remove();
});
});
</script>

声明:此文系舞林cuznwww.wulinlw.org)原创稿件,转载请保留版权

判断移动版访问

Continue Read..
<script>
//首页自动跳转(当移动版访问www.guagua.cn时,就跳转到m.guagua.cn中)
var sUserAgent=navigator.userAgent;
var mobileAgents=['iphone','ipad','ipod','android','windows phone','windows ce','symbian','blackberry'];
for( var i=0;i<mobileAgents.length;i++){
if(sUserAgent.toLowerCase().indexOf(mobileAgents[i])>-1){
location='http://www.aipark.com';
break;
}
}
</script>

声明:此文系舞林cuznwww.wulinlw.org)原创稿件,转载请保留版权

【Linux】contos6.5源码安装mysql

Continue Read..

首先去mysql官网下载 一个源码安装包  一定要源码的  不是rpm的 

http://dev.mysql.com/downloads/mysql/   再次强调 下源码  

一、编译安装MySQL前的准备工作

安装编译源码所需的工具和库

yum install gcc gcc-c++ ncurses-devel perl 

 

安装cmake,从http://www.cmake.org下载源码并编译安装

wget http://www.cmake.org/files/v2.8/cmake-2.8.10.2.tar.gz   

tar -xzvf cmake-2.8.10.2.tar.gz   

cd cmake-2.8.10.2   

./bootstrap ; make ; make install

 

二、设置MySQL用户和组

新增mysql用户组

groupadd mysql 

useradd -r -g mysql mysql  

 

三、新建MySQL所需要的目录

新建mysql安装目录

mkdir -p /usr/local/mysql 

新建mysql数据库数据文件目录

mkdir -p /usr/local/mysql/data

 

 

四、下载MySQL源码包并解压

tar -zxv -f mysql-5.6.16.tar.gz  

cd mysql-5.6.16

 

五、编译安装MySQL

从mysql5.5起,mysql源码安装开始使用cmake了,设置源码编译配置脚本。

 

cmake -DCMAKE_INSTALL_PREFIX=/usr/local/mysql -DMYSQL_DATADIR=/usr/local/mysql/data -DDEFAULT_CHARSET=utf8 -DDEFAULT_COLLATION=utf8_general_ci  -DEXTRA_CHARSETS=all   -DENABLED_LOCAL_INFILE=1

 

make

 

make install

 

 

六、修改mysql目录所有者和组

修改mysql安装目录

chown -R mysql:mysql  /usr/local/mysql 

chown -R mysql:mysql  /usr/local/mysql/data 

 

七、初始化mysql数据库

cd /usr/local/mysql   

scripts/mysql_install_db --user=mysql --datadir=/usr/local/mysql/data

 

八、复制mysql服务启动配置文件

cp /usr/local/mysql/support-files/my-default.cnf /etc/my.cnf  

注:如果/etc/my.cnf文件存在,则覆盖。

 

九、启动mysql服务并加入开机自启动(可选这个步骤,以后可以自己启动的)

cp support-files/mysql.server /etc/init.d/mysqld   

vim /etc/profile   

PATH=/usr/local/mysql/bin:/usr/local/mysql/lib:$PATH  

export PATH 


#查看  echo $PATH


service mysqld start 

chkconfig --level 35 mysqld on

 

 

 

 

十、检查mysql服务是否启动

netstat -tulnp | grep 3306   

mysql -u root -p 

 

默认密码是空 如果报错的话  

参考网址  http://www.cnblogs.com/visi_zhangyang/archive/2012/03/05/2380531.html

 

 

方法: 修改/etc/my.conf:

[mysqld] 

datadir=/usr/local/mysql/data 

socket=/var/lib/mysql/mysql.sock 

 

[mysql.server] 

user=mysql 

basedir=/usr/local/mysql 

 

If there is not currently a section called [client], add one at the bottom of the file and copy the socket= line under the [mysqld] section such as: 

 

[client] 

socket=/var/lib/mysql/mysql.sock 

 

/usr/local/mysql/bin/mysql -u root -p -S /tmp/mysql.sock

 

 

修改 mysql root密码  SET PASSWORD FOR 'root'@'localhost' = PASSWORD('newpass');

 

 

参考网址   http://blog.csdn.net/wendi_0506/article/details/39478369

 

声明:此文系舞林cuznwww.wulinlw.org)原创稿件,转载请保留版权

【PHP】关于var_dump(md5('aabg7XSs') == md5('aabC9RqS'));感想

Continue Read..

今天逛V站 看到一大神写的 var_dump(md5('aabg7XSs') == md5('aabC9RqS'));  突然觉得颠覆了 

然后就搜各种资料了解 原来是PHP弱语言  ==是匹配等于  所以就造成了 

var_dump(md5('aabg7XSs') == md5('aabC9RqS'));


大神网址  https://www.v2ex.com/t/188364

脑洞破解 http://drops.wooyun.org/papers/1409

以后做密码验证 还是尽量少直接用 MD5  起码加个盐直 然后在截取下 比较靠谱 能用===的坚决用===

附带 PHP5.5推荐的加密 方式 

http://php.net/manual/zh/function.password-hash.php

http://www.jb51.net/article/48180.htm

声明:此文系舞林cuznwww.wulinlw.org)原创稿件,转载请保留版权

动态生成顺序号

Continue Read..

示例一:

           var length = $("#tb").find("tr").length;  //#tb为Table的id  获取所有行

            for (i = 0; i < length; i++) {

             $("#tb tr").eq(i).children("td").eq(0).html(i);  //给每行的第一列重写赋值

            }

 

 

示例二:

 <html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>无标题页</title>
    <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
    <script type="text/javascript">
        function del(obj){
            $(obj).parents("tr").siblings().each(function(i){
                $(this).find("td").eq(0).html(i+1)
            })
            $(obj).parents("tr").remove();
        }
    </script>
</head>
<body>
<table>
    <tr><td>1</td><td>a</td><td><a onclick="del(this)">删除</a></td></tr>
    <tr><td>2</td><td>b</td><td><a onclick="del(this)">删除</a></td></tr>
    <tr><td>3</td><td>c</td><td><a onclick="del(this)">删除</a></td></tr>
    <tr><td>4</td><td>d</td><td><a onclick="del(this)">删除</a></td></tr>
</table>
</body>
<html>

 

 

声明:此文系舞林cuznwww.wulinlw.org)原创稿件,转载请保留版权

【Linux】nginx+Keepalived 高可用负载均衡

Continue Read..

老规矩 还是先介绍下这个日志的主题

主要是用nginx+Keepalived来实现 多服务器的热备 和 负载均衡

 

 

 

我现在有4台服务器

192.168.9.70  主   nginx+Keepalived

192.168.9.84  副   nginx+Keepalived

192.168.9.89  web1

192.168.9.87  web2

 

这样配置的好处 就是 主和副 可以实现高可用  一台挂了 另一台补上  而且web服务器只需要配置 web的服务即可 然后根据ngxin的转发  实现了负载均衡 (web服务器放同样一套程序)

点击查看原图

 

 

 

 

首先就是配置 主,副的nginx和Keepalived  

Keepalived  参考我之前写的一个文章 http://www.wulinlw.org/post-545.html  这里的配置需要改下 

http://www.wulinlw.org/post-545.html

 

重新写一个调动脚本

vrrp_script chk_haproxy{

       #script "/etc/keepalived/chk_haproxy.sh"

       script "/etc/keepalived/nginx_pid.sh"   #这里是重新写的脚本

        interval 2

        weight 2

}



#!/bin/sh
# check nginx server status
NGINX=/usr/sbin/nginx
PORT=80

nmap localhost -p $PORT | grep "$PORT/tcp open"
#echo $?
if [ $? -ne 0 ];then
    $NGINX -s stop
    $NGINX
    sleep 3
    nmap localhost -p $PORT | grep "$PORT/tcp open"
    [ $? -ne 0 ] && /etc/init.d/keepalived stop
fi


然后配置nginx


安装依赖包
#yum install gcc pcre pcre-devel zlib zlib-devel openssl openssl-devel

下载nginx  版本你们自己去官网看
#cd /usr/local/src
#wget http://www.nginx.org/download/nginx-1.0.9.tar.gz
#tar zxvf nginx-1.0.9.tar.gz
#cd nginx-1.0.9

配置安装
#./configure --prefix=/usr --sbin-path=/usr/sbin/nginx --conf-path=/etc/nginx/nginx.conf --error-log-path=/var/log/nginx/error.log --pid-path=/var/run/nginx/nginx.pid --lock-path=/var/lock/nginx.lock --user=nginx --group=nginx --with-http_ssl_module --with-http_flv_module --with-http_gzip_static_module --http-log-path=/var/log/nginx/access.log --http-client-body-temp-path=/var/tmp/nginx/client/ --http-proxy-temp-path=/var/tmp/nginx/proxy/ --http-fastcgi-temp-path=/var/tmp/nginx/fcgi/
#make
#make install

建立用户:

/usr/sbin/groupadd nginx
/usr/sbin/useradd -g nginx -M nginx
mkdir -p /var/tmp/nginx/client
启动nginx

#/usr/sbin/nginx



 

device eth0 does not seem to be present, delaying initialization   错误解决方案
/etc/udev/rules.d/70-persistent-net.rules 删除后重启机器   reboot

重启网络服务。service network restart或/etc/init.d/network restart


设置虚拟IP
ifconfig eth0:0 192.168.9.71 netmask 255.255.255.0 up
写在/etc/rc.local里也可以,写在这里就不怕断电后机器无法正常使用了。


然后修改ngxin.conf文件
vim /etc/nginx/nginx.conf
加一段脚本

  upstream backend_server {
        server   192.168.9.89:80 weight=1 max_fails=2 fail_timeout=30s;
        server   192.168.9.87:80 weight=2 max_fails=2 fail_timeout=30s;
     }
这里就是负载均衡的转发

然后 在修改 vim /etc/nginx//vhost/www.cuzn-test.com.conf 

加一段脚本来调用 刚才nginx.conf的脚本


 location /

                {
                        proxy_pass http://backend_server;
                }


这样基本都配置好了 
这个写的比较简洁 是因为之前配置了Keepalived  所以可以参考我之前的日志 ngxin一搜一大堆 我就不在写了 



声明:此文系舞林cuznwww.wulinlw.org)原创稿件,转载请保留版权

【Linux】vmware克隆linux出现Device eth0 does not seem to be present

Continue Read..

解决方法简单,如下三步

第一步:删除文件70-persistent-net.rules

# rm -f /etc/udev/rules.d/70-persistent-net.rule

第二步:修改ifcfg-eth0

# vim /etc/sysconfig/network-scripts/ifcfg-eth0

删除或者注释MAC地址的配置

第三步:重启服务器

# reboot

至此问题解决了。


声明:此文系舞林cuznwww.wulinlw.org)原创稿件,转载请保留版权

【Linux】服务器HA高可用之HAProxy+Keepalived

Continue Read..

这个环境的主要作用是服务器高可用、热备。 当主服务器挂掉后,会直接访问副服务器,以免用户打不开web

 

参考网址

http://www.cnblogs.com/kgdxpr/p/3325788.html

http://www.cnblogs.com/kgdxpr/p/3272861.html

点击查看原图

 

我现在的 布局如图 

 

192.168.9.87  一个Haproxy 代理转发服务器 

192.168.9.89    Keepalived  主

192.168.9.84   Keepalived    副

192.168.8.80   虚拟服务器ip 

ifconfig eth0:1 192.168.9.80 network 255.255.255.0


 

首先在9.87里面配置 Haproxy  

 

参考  http://www.wulinlw.org/post-544.html

 

官方地址:http://haproxy.1wt.eu/
下载地址:http://haproxy.1wt.eu/download/1.4/src/haproxy-1.4.24.tar.gz
 
[root@cacti  local]# yum install -y gcc
[root@cacti src]# tar xzvf haproxy-1.4.24.tar.gz
[root@cacti haproxy-1.4.24]# make TARGET=linux26 PREFIX=/usr/local/haproxy
[root@cacti haproxy-1.4.24]# make install PREFIX=/usr/local/haproxy
 
haproxy 默认是没有配置文件的,需要自己手机创建 vim /etc/haproxy.cfg
global log 127.0.0.1 local3 maxconn 20480 chroot /usr/local/haproxy uid 1004 #1004为haproxy 用户的uid ,haproxy用户需要自己手动创建 gid 1004 daemon quiet nbproc 1 pidfile /var/run/haproxy.pid defaults log global mode http maxconn 20480 option httplog option httpclose option forwardfor option dontlognull option redispatch retries 3 balance roundrobin contimeout 5000 clitimeout 50000 srvtimeout 50000 listen web_poll 192.168.9.87:80 mode http # option httplog # option dontlognull # option logasap # option forwardfor # option httpclose # option httpchk GET /index.html #listen web_proxy 192.168.9.80:80 server web1 192.168.9.89:80 cookie 1 check inter 2000 rise 3 fall 3 server web2 192.168.9.84:80 cookie 2 check inter 2000 rise 3 fall 3 #listen status 192.168.9.87:8080 # stats enable # stats uri /stats # stats auth admin:123456

# stats realm (Haproxy\ statistic)


添加日志

[root@cacti ~]# vim /etc/syslog.conf 添加: local3.* /var/log/haproxy.log local0.* /var/log/haproxy.log [root@cacti ~]# vim /etc/sysconfig/syslog 修改: SYSLOGD_OPTIONS="-r -m 0" service syslog restart

 五、创建haproxy启动脚本

 

[root@node3 ~]# chmod +x /etc/rc.d/init.d/haproxy 

[root@node3 ~]# chkconfig --add haproxy

service haproxy does not support chkconfig

----解决上面的问题的办法是在/etc/rc.d/init.d/haproxy中添加下面两句到#!/bin/bash之后

[root@node3 ~]# cat /etc/rc.d/init.d/haproxy

#!/bin/bash  

#chkconfig: 2345 10 90

#description:haproxy

BASE_DIR="/usr/local/haproxy"  

ARGV="$@"  

  

start()  

----其中2345是默认启动级别,级别有0-6共7个级别。

----等级0表示:表示关机

----等级1表示:单用户模式

----等级2表示:无网络连接的多用户命令行模式

----等级3表示:有网络连接的多用户命令行模式

----等级4表示:不可用

----等级5表示:带图形界面的多用户模式

----等级6表示:重新启动

----10是启动优先级,90是停机优先级,优先级范围是0-100,数字越大,优先级越低。

 

 

[root@cacti ~]# vim /etc/init.d/haproxy

 

#!/bin/bash

#
# haproxy
#
# chkconfig: 35 85 15
# description: HAProxy is a free, very fast and reliable solution \
# offering high availability, load balancing, and \
# proxying for TCP and HTTP-based applications
# processname: haproxy
# config: /etc/haproxy.cfg
# pidfile: /var/run/haproxy.pid

# Source function library.
. /etc/rc.d/init.d/functions

# Source networking configuration.
. /etc/sysconfig/network

# Check that networking is up.
[ "$NETWORKING" = "no" ] && exit 0

config="/etc/haproxy.cfg"
exec="/usr/local/haproxy/sbin/haproxy"
prog=$(basename $exec)

[ -e /etc/sysconfig/$prog ] && . /etc/sysconfig/$prog

lockfile=/var/lock/subsys/haproxy

check() {
    $exec -c -V -f $config
}

start() {
    $exec -c -q -f $config
    if [ $? -ne 0 ]; then
        echo "Errors in configuration file, check with $prog check."
        return 1
    fi
 
    echo -n $"Starting $prog: "
    # start it up here, usually something like "daemon $exec"
    daemon $exec -D -f $config -p /var/run/$prog.pid
    retval=$?
    echo
    [ $retval -eq 0 ] && touch $lockfile
    return $retval
}

stop() {
    echo -n $"Stopping $prog: "
    # stop it here, often "killproc $prog"
    killproc $prog 
    retval=$?
    echo
    [ $retval -eq 0 ] && rm -f $lockfile
    return $retval
}

restart() {
    $exec -c -q -f $config
    if [ $? -ne 0 ]; then
        echo "Errors in configuration file, check with $prog check."
        return 1
    fi
    stop
    start
}

reload() {
    $exec -c -q -f $config
    if [ $? -ne 0 ]; then
        echo "Errors in configuration file, check with $prog check."
        return 1
    fi
    echo -n $"Reloading $prog: "
    $exec -D -f $config -p /var/run/$prog.pid -sf $(cat /var/run/$prog.pid)
    retval=$?
    echo
    return $retval
}

force_reload() {
    restart
}

fdr_status() {
    status $prog
}

case "$1" in
    start|stop|restart|reload)
        $1
        ;;
    force-reload)
        force_reload
        ;;
    checkconfig)
        check
        ;;
    status)
        fdr_status
        ;;
    condrestart|try-restart)
      [ ! -f $lockfile ] || restart
    ;;
    *)
        echo $"Usage: $0 {start|stop|status|checkconfig|restart|try-restart|reload|force-reload}"
        exit 2
esac


六、启动

[root@cacti etc]# /etc/init.d/haproxy start
Starting haproxy: [ OK ]
[root@cacti etc]# ps -ef | grep haproxy
100 2305 1 0 17:55 ? 00:00:00 /usr/local/sbin/haproxy -D -f /etc/haproxy.cfg -p /var/run/haproxy.pid
root 2308 774 0 17:55 pts/0 00:00:00 grep haproxy
[root@cacti etc]#

报错:

[root@cacti ~]# /etc/init.d/haproxy start
Starting haproxy: [ALERT] 177/105503 (18602) : Starting proxy cacti: cannot bind socket
                                                           [FAILED]

产生这个错误可能有两个原因,
1)没有加入内核参数 (net.ipv4.ip_nonlocal_bind=1)
2)端口冲突
如果没有加入 net.ipv4.ip_nonlocal_bind=1  
解决方法:
修改内核参数: /etc/sysctl.conf
net.ipv4.ip_nonlocal_bind=1
保存结果,使结果生效
sysctl –p
 
或者使用echo进去,前提是sysctl.conf文件中没有本条参数:

echo 'net.ipv4.ip_nonlocal_bind = 1'>>/etc/sysctl.conf
 
参考网址  http://www.linuxyw.com/a/yunweiguzhang/20130614/570.html





然后在 9.89 和9.84上面配置 apache 和 Keepalived
apache这里不多介绍   2个服务器配置apache之后个放一个index.html文件  里面分别写 89 和84
然后用 curl http://192.168.9.89/84 测试时候正常 如出来 89/84 则apache正常   


1、下载安装依赖包

yum install -y wget make gcc openssl-devel popt-devel
2、下载、安装Keepalived

wget http://www.keepalived.org/software/keepalived-1.2.8.tar.gz
tar zxvf keepalived-1.2.8.tar.gz
cd keepalived-1.2.8
./configure --prefix=/usr/local/keepalived
make
make install
3、安装成功后做成服务模式。

cp /usr/local/keepalived/sbin/keepalived /usr/sbin/
cp /usr/local/keepalived/etc/sysconfig/keepalived /etc/sysconfig/
cp /usr/local/keepalived/etc/rc.d/init.d/keepalived /etc/init.d/
4、配置文件

mkdir -p /etc/keepalived/
cp /usr/local/keepalived/etc/keepalived/keepalived.conf /etc/keepalived/keepalived.conf
chmod +x /etc/init.d/keepalived
vi /etc/keepalived/keepalived.conf


global_defs {
    router_id LVS_DEVEL
}
#监测haproxy进程状态,每2秒执行一次
vrrp_script chk_haproxy {
    script "/etc/keepalived/chk_haproxy.sh"
    interval 2
    weight 2
}
vrrp_instance VI_1 {
    state MASTER          #从服务器为BACKUP
    interface eth0
    virtual_router_id 51
    priority 100             #从服务器要低于100
    advert_int 1
    mcast_src_ip 192.168.9.89    #MASTER服务器IP,从服务器写从服务器的IP
    authentication {
        auth_type PASS
        auth_pass 111111
    }
    track_script {
        chk_haproxy    #监测haproxy进程状态
    }
    virtual_ipaddress {
        192.168.9.80    #虚拟IP
    }
}

vi /etc/keepalived/chk_haproxy.sh

status=$(ps aux|grep haproxy | grep -v grep | grep -v bash | wc -l)
if [ "${status}" = "0" ]; then
    /etc/init.d/haproxy start

    status2=$(ps aux|grep haproxy | grep -v grep | grep -v bash |wc -l)

    if [ "${status2}" = "0"  ]; then
            /etc/init.d/keepalived stop
    fi
fi



/etc/init.d/keepalived  start  stop

2台keepalived配置好了之后  就在本地浏览器访问  192.168.9.87  

这样显示  89  然后关掉89服务器的apache 在访问 192.168.9.87  会出现84  然后在关掉84服务器的apache 开启89服务器的apache 又出现 89  

这样 整个环境就算配置完成了   实现了高可用

声明:此文系舞林cuznwww.wulinlw.org)原创稿件,转载请保留版权