使用JS批量选中功能实现更改数据库中的status状态值(批量展示)


Posted in Javascript onNovember 22, 2016

我们在开发项目的时候经常会在后台管理时用到批量展示功能来动态的修改数据库的值。下面以修改数据库的status状态值来实现批量展示功能。批量选中功能引用js来实现。

前端html代码:

<table class="mlt" style="border:1px solid red;">
<thead>
<tr>
<if condition="$type eq 'pg'">
<th colspan="9" style="text-align:left;padding-left:20px;background-color:#e5e4e4;color:#c10e23;">实物商品</th>
<else/>
<th colspan="8" style="text-align:left;padding-left:20px;background-color:#e5e4e4;color:#c10e23;">虚拟商品</th>
</if>
<th style="background-color:#e5e4e4;">
<a href="{:U('Mall/AddMall',array('type'=>$type))}" style="color:#c10e23;text-decoration:none;">+新增商品</a></th> 
</tr>
<tr>
<th style="background-color:#f7f7f7;width:8%;text-align:center;" class="lf">
<input name='chkAll' type='checkbox' id='chkAll' onClick="checkAll(this, 'id[]')" value='checkbox' /> 全选
</th>
<th style="background-color:#f7f7f7;width:8%;" class="lf">商品编号</th>
<th style="background-color:#f7f7f7;width:13%;" class="lf">名称</th>
<th style="background-color:#f7f7f7;width:18%;" class="lf">标题</th>
<if condition="$type eq 'pg'">
<th style="background-color:#f7f7f7;width:8%;" class="lf">品牌</th>
</if>
<th style="background-color:#f7f7f7;width:8%;" class="lf">组别</th>
<th style="background-color:#f7f7f7;width:5%;" class="lf">排序</th>
<th style="background-color:#f7f7f7;width:5%;" class="lf">状态</th>
<th style="background-color:#f7f7f7;width:10%;">图标</th>
<th style="background-color:#f7f7f7;text-align:center;" class="lf">操作</th>
</tr>
</thead>
<tbody>
<volist name="list" id="vo">
<tr>
<td class="lf" style="text-align:center;">
<input name='id[]' type='checkbox' value='{$vo.id}' onClick="checkItem(this, 'chkAll')">
</td>
<td class="lf">{$vo['code']}</td>
<td class="lf">{$vo['name']}</td>
<td class="lf">{$vo['title']}</td>
<if condition="$type eq 'pg'">
<td class="lf">{$vo['brand']}</td>
</if>
<td class="lf">{$vo['ggroup']}</td>
<td class="lf">{$vo['sortno']}</td>
<td class="lf"><if condition="$vo['status'] eq 1">展示<else/>不展示</if></td>
<td><img src="{$vo['base_img']}" style="width:40px;" /></td>
<td class="lf" style="text-align:center;">
<a href="{:U('Mall/NextLevel',array('pid'=>$vo['id']))}" class='cz' style="text-decoration:none;">编辑子信息</a>
<a href="{:U('Mall/UpdateMall',array('id'=>$vo['id']))}" class='cz' style="text-decoration:none;margin:0 7px;">编辑</a>
<a href="{$Think.config.WEB_URL}/Shop/GoodsDetails.html?pid={$vo['id']}&type={$vo['type']}" class='cz' style="text-decoration:none;" target="_Blank">查看</a>
</td>
</tr>
</volist>
<tr height="45">
<td colspan="10" style="text-align:left;padding-left:40px;">
<input type="button" id="btn_show" value="批量展示" class="btn_normal" style="width:100px;margin-left:20px;">
</td> 
</tr>
</tbody>
</table>
<div>{$page}</div>

js代码使用ajax提交代码到后台GoodsShow()方法:

<script type="text/javascript">
var ids = []; //把得到的is转化为数组形式
$('#btn_show').click(function(){
btnCheck('展示');
data = {
"ids":ids
};
$.ajax({
type:"POST",
url:"{:U('Mall/GoodsShow')}",
data:data,
//dataType:"json",
success:function(msg){
if(msg == 00){ //如果msg=00则修改成功
alert("批量展示成功");
window.location.href='/index.php/Admin/Mall/MallList'; //修改完成后自动刷新
}else{
alert("批量展示失败,请重新编辑");
}
},
error:function(){
alert("批量编辑失败,请重新编辑"); //错误提示
}
}); 
});function btnCheck(info){ 
var obj = $("input[name='id[]']:checked").each(function(){ //得到选中的id的每一个值并且这个值为一个数组
ids.push($(this).val()); 
});
if (ids == false) { 
alert("请选定要"+info+"的商品");
return false;
}else {
return ids; 
}
}
</script>

后台GoodsShow()方法:

public function GoodsShow(){
$goods=M('shop_goods_info'); //实例化要使用的数据表
$data = I(); //获取前台页面获取的id值(这个值为一个一位数组)
//var_dump(I('ids'));die(); //打印
$id=implode(',',I('ids')); //把得到的这个数组用implode方法拆分 
//var_dump(I('id'));die(); //打印查看
$order=$goods->where("id in ($id)")->setField('status','1'); //用得到的$id的值匹配数据库中的id值,并设置id下的status字段值为1.
if($order>=1){ // 如果...else... 
$remark="00";
}else{
$remark="01";
}
echo $remark;
}

以上所述是小编给大家介绍的使用JS批量选中功能实现更改数据库中的status状态值(批量展示),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
PPK 谈 JavaScript 的 this 关键字 [翻译]
Sep 29 Javascript
JQuery AJAX提交中文乱码的解决方案
Jul 02 Javascript
jQuery.fn和jQuery.prototype区别介绍
Oct 05 Javascript
变量声明时命名与变量作为对象属性时命名的区别解析
Dec 06 Javascript
用js读、写、删除Cookie代码分享及详细注释说明
Jun 05 Javascript
jQuery+ajax实现鼠标单击修改内容的方法
Jun 27 Javascript
Bootstrap表单Form全面解析
Jun 13 Javascript
详解AngularJS中的表单验证(推荐)
Nov 17 Javascript
详解vue使用$http服务端收不到参数
Apr 19 Javascript
js常用方法、检查是否有特殊字符串、倒序截取字符串操作完整示例
Jan 26 Javascript
vue cli4下环境变量和模式示例详解
Apr 09 Javascript
js实现盒子移动动画效果
Aug 09 Javascript
AngularJS中指令的四种基本形式实例分析
Nov 22 #Javascript
AngularJS中directive指令使用之事件绑定与指令交互用法示例
Nov 22 #Javascript
微信小程序-图片、录音、音频播放、音乐播放、视频、文件代码实例
Nov 22 #Javascript
详解js中Json的语法与格式
Nov 22 #Javascript
AngularJS中一般函数参数传递用法分析
Nov 22 #Javascript
javascript入门之string对象【新手必看】
Nov 22 #Javascript
模板视图和AngularJS之间冲突的解决方法
Nov 22 #Javascript
You might like
PHP开发负载均衡指南
2010/07/17 PHP
for循环连续求和、九九乘法表代码
2012/02/20 PHP
解析wamp5下虚拟机配置文档
2013/06/27 PHP
LBS blog sql注射漏洞[All version]-官方已有补丁
2007/08/26 Javascript
JavaScript Sort 表格排序
2009/10/31 Javascript
js 操作select相关方法函数
2009/12/06 Javascript
jQuery中与toggleClass等价的程序段 以及未来学习的方向
2010/03/18 Javascript
JavaScript作用域链使用介绍
2013/08/29 Javascript
jQuery实现鼠标可拖动调整表格列宽度
2014/05/26 Javascript
js中实现多态采用和继承类似的方法
2014/08/22 Javascript
JavaScript的null和undefined区别示例介绍
2014/09/15 Javascript
JavaScript的Polymer框架中dom-repeat与VM的相关操作
2015/07/29 Javascript
JavaScript实现图片自动加载的瀑布流效果
2016/04/11 Javascript
最全面的百度地图JavaScript离线版开发
2016/09/10 Javascript
jQuery实现动态删除LI的方法
2017/05/30 jQuery
AngularJS通过ng-Img-Crop实现头像截取的示例
2017/08/17 Javascript
vue中echarts引入中国地图的案例
2020/07/28 Javascript
原生js实现贪吃蛇游戏
2020/10/26 Javascript
[14:21]VICI vs EG (BO3)
2018/06/07 DOTA
[15:07]lgd_OG_m2_BP
2019/09/10 DOTA
Python多线程学习资料
2012/12/19 Python
python通过BF算法实现关键词匹配的方法
2015/03/13 Python
小议Python中自定义函数的可变参数的使用及注意点
2016/06/21 Python
python 自动去除空行的实例
2018/07/24 Python
python读取文本中的坐标方法
2018/10/14 Python
Django使用unittest模块进行单元测试过程解析
2019/08/02 Python
python3实现绘制二维点图
2019/12/04 Python
Django数据统计功能count()的使用
2020/11/30 Python
HTML5边玩边学(2)基础绘图实现方法
2010/09/21 HTML / CSS
IWOOT美国:新奇的小玩意
2018/04/27 全球购物
Fossil美国官网:化石手表、手袋、首饰及配饰
2019/02/17 全球购物
单位消防安全制度
2014/01/12 职场文书
审计主管岗位职责
2014/01/31 职场文书
我的大学生活演讲稿
2014/04/25 职场文书
2014年大班保育员工作总结
2014/12/02 职场文书
优秀班主任主要事迹材料
2014/12/16 职场文书