jquery ajax修改和无刷新分页_H5之家 - 中国HTML5教程资源分享第一站

jquery ajax修改和无刷新分页。工作笔记：
文件一：

<div>
<p style="padding-bottom:10px;"> 请选择类型
<input type="radio" name="stockType" value="spot" onclick="$('#supplyer').slideUp('slow');
$('#choseSpl').hide();" checked="checked"/> 类型一
<input type="radio" name="stockType" value="spot" onclick="dispSuply('in')" />
类型二 <input type="radio" name="stockType" value="spot" onclick="dispSuply('out')"/>
<input type="hidden" id="sstype" value="">
类型三<input name="splyer" type="hidden" value="" id="splyer"/></p>
</div>
 
<!--加载页面二-->
<include file="gonyinshan" />
<script type="text/javascript">
//选择供应商
 
function selSuply(obj)
{
$('#choseSpl').show();
$('#choseSpl').html('<b>您选择的供应商是</b>&nbsp;>> '+$(obj).val());
$('#splyer').val($(obj).attr('id'));
$('#supplyer').slideUp();
 
}
 
//ajax显示供应商列表
function dispSuply(country)
{
$('#sstype').val(country);
$('#supplyer').slideDown('slow');
$(".suptitle a").removeClass('hover');
$("#"+country).addClass("hover");
$(".scrollH").load('/member.php/Stock/gyslist/c/'+country);
 
//$.post('{:url("supplierlist")}',
 
{c:country},function(data){
//        $('.listSpl').remove();
//        
 
$('#sTr').after(data);
//
//    });
 
}
</script>

文件二：

<script type="text/javascript">
$(function(){
$(".suptitle a").click(function(){
$(".suptitle a").removeClass('hover');
$(this).addClass("hover");
$(".scrollH").load('/member.php/Stock/gyslist/c/'+$(this).attr('id'));
});
$("input[name='gysse']").click(function(){
$(".suptitle a").removeClass('hover');
$(".scrollH").load('/member.php/Stock/gyslist/k/'+$('#k').val());
})
})
 
</script>
 
<div id="supplyer">
<div class="supT">
<span class="suptitle">
<a href="javascript:;" class="hover" onfocus="this.blur()" id="in">国内供应商</a>
<a href="javascript:;" onfocus="this.blur()" id="out">国际供应商
 
</a>
</span>
 
供应商列表： <a href="javascript:;" onclick="alertinfo('alertdiv')" style="color:#0066CC; margin-right:30px;">添加新供应商
 
</a>
供应商搜索：<input id="k" type="text" /><input name="gysse" type="button" value="搜索"/>
<span onclick="$('#supplyer').slideUp();" 
 
class="close">关闭</span>
</div>
 
<div class="scrollH">
 
</div>
</div>

文件三：

<script type="text/javascript">
$(function(){
$(".listSpl input[type='text']").click(function(){
$("#newvalue").val($(this).val());
$(this).parent('td').addClass('tdborder');
});
$("select[name='suptype']").focus(function(){
$("#newvalue").val($(this).val());
});
 
$(".listSpl input[type='text'],select[name='suptype']").blur(function(){
$(this).parent('td').removeClass('tdborder');
var newvalue = $.trim($(this).val());
if(newvalue != $("#newvalue").val())
{
var idValue = $(this).attr('id');
arr = idValue.split('/');
var id = arr[1];
var fd = arr[0];
$(this).after($('#ajaxAffect'));
$('#ajaxAffect').fadeIn();
$.post('/member.php/Stock/supedit',{id:id,fld:fd,newval:newvalue},function(data){
if($.trim(data) == 'success')
{
var myImg = '修改成功！';
 
}
else
{
var myImg = '<img src="/Public/images/icon/reg3.gif" alt="" />修改失败！';
return false;
}
 
$('#ajaxAffect').html(myImg);
});
if($(this).attr('name') == 'suptype')
{
$(this).parents('tr').remove();
}
 
setTimeout("$('#ajaxAffect').fadeOut()",1500);
}
});
 
//分页连接替换加绑定onclick重新载
 
入事件
$.each(jQuery.makeArray($(".pages a")),function(i,n){
n = n.toString();
$(".pages a").eq(i).attr('href','javascript:;');
$(".pages a").eq(i).attr('rel',n);
 
});
$(".pages a").bind('click',function(){
$(".scrollH").load($(this).attr('rel'));
});
})
 
</script>
<style 
 
type="text/css">
.listSpl input{border:1px #ffffff solid; overflow:hidden}
 
</style>
<div id="result"></div>
<div id="ajaxAffect"><img name="" src="__PUBLIC__/images/ajax-loader.gif" alt="" /></div>
<?php if($_GET['k']) echo '<font color=red>以下为搜索结果</font>'; ?>
<table border="0" width="100%" align="left" cellspacing="1" bgcolor="#FF9933" id="tableflow">
<tr valign="middle" id="sTr">
<td width="4%" align="center">选择</td>
<td width="10%">供应商名称</td>
<td width="10%">供应商类型</td>
<td width="10%">供应商公司地址</td>
<td width="10%">柜台地址</td>
<td width="10%">联系电话</td>
<td width="10%">传真</td>
<td width="10%">QQ</td>
<td width="10%">email</td>
<td width="10%">MSN</td>
<td width="5%">联系人</td>
</tr>
<iterate name="supplier" id="Slist">
<tr class="listSpl" style="background-color:#ffffff">
<?php $style1 = ($Slist->supply_type=='0')? 'selected':' ';
$style2 = ($Slist->supply_type=='1')? 'selected':' ';
?>
<td><input name="sComp" type="radio" value="{$Slist.supply_name}" id="{$Slist.supply_id}"  onclick="selSuply(this);"/></td>
<td><input id="supply_name/{$Slist.supply_id}" type="text" value="{$Slist.supply_name}" style="width:80px;"/></td>
<td><select id="supply_type/{$Slist.supply_id}" name="suptype">
<option value="0" {$style1}>国内
 
</option>
<option value="1" {$style2}>国外
 
</option>
</select></td>
<td><input id="supply_addr/{$Slist.supply_id}" type="text" value="{$Slist.supply_addr}" style="width:80px;"/></td>
<td><input id="supply_addr2/{$Slist.supply_id}" type="text" value="{$Slist.supply_addr2}" style="width:80px;"/></td>
<td><input id="supply_tel/{$Slist.supply_id}" type="text" value="{$Slist.supply_tel}" 
 
style="width:80px;"/></td>
<td><input id="supply_fax/{$Slist.supply_id}" type="text" value="{$Slist.supply_fax}" style="width:80px;"/></td>
<td><input id="supply_qq/{$Slist.supply_id}" type="text" value="{$Slist.supply_qq}" style="width:80px;"/></td>
<td><input id="supply_email/{$Slist.supply_id}" type="text" value="{$Slist.supply_email}" style="width:80px;"/></td>
<td><input id="supply_msn/{$Slist.supply_id}" type="text" value="{$Slist.supply_msn}" style="width:80px;"/></td>
<td><input id="supply_linkman/{$Slist.supply_id}" type="text" value="{$Slist.supply_linkman}" style="width:50px;"/></td>
</tr>
</iterate>
<tr style="background-color:#ffffff"><td colspan="11" class="pages" style="text-align:center">{$page}</td></tr>
 
</table>
<input type="hidden" value="" id="newvalue" />