使用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 相关文章推荐
清除网页历史记录,屏蔽后退按钮!
Dec 22 Javascript
javascipt匹配单行和多行注释的正则表达式
Nov 20 Javascript
from表单多个按钮提交用onclick跳转不同action
Apr 24 Javascript
JS实现仿QQ聊天窗口抖动特效
May 10 Javascript
JavaScript中的acos()方法使用详解
Jun 14 Javascript
js中数组结合字符串实现查找(屏蔽广告判断url等)
Mar 30 Javascript
jQuery unbind 删除绑定事件详解
May 24 Javascript
一道优雅面试题分析js中fn()和return fn()的区别
Jul 05 Javascript
vue-cli脚手架-bulid下的配置文件
Mar 27 Javascript
详解angularjs跨页面传参遇到的一些问题
Nov 01 Javascript
webpack的tree shaking的实现方法
Sep 18 Javascript
如何使用RoughViz可视化Vue.js中的草绘图表
Jan 30 Vue.js
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
虹吸式咖啡探讨–研磨
2021/03/03 冲泡冲煮
简单的移动设备检测PHP脚本代码
2011/02/19 PHP
destoon复制新模块的方法
2014/06/21 PHP
PHP实现生成唯一编号(36进制的不重复编号)
2014/07/01 PHP
YII模块实现绑定二级域名的方法
2014/07/09 PHP
php遍历树的常用方法汇总
2015/06/18 PHP
PHP的关于变量和日期处理的一些面试题目整理
2015/08/10 PHP
laravel-admin 管理平台获取当前登陆用户信息的例子
2019/10/08 PHP
显示js对象所有属性和方法的函数
2009/10/16 Javascript
纯Javascript实现Windows 8 Metro风格实现
2013/10/15 Javascript
动态加载jquery库的方法
2014/02/12 Javascript
JQuery标签页效果实例详解
2015/12/24 Javascript
解决JS无法调用Controller问题的方法
2015/12/31 Javascript
通过Tabs方法基于easyUI+bootstrap制作工作站
2016/03/28 Javascript
深入浅析Bootstrap列表组组件
2016/05/03 Javascript
8 行 Node.js 代码实现代理服务器
2016/12/05 Javascript
微信小程序注册60s倒计时功能 使用JS实现注册60s倒计时功能
2017/08/16 Javascript
仿vue-cli搭建属于自己的脚手架的方法步骤
2019/04/17 Javascript
Python求两个list的差集、交集与并集的方法
2014/11/01 Python
Python实现查找系统盘中需要找的字符
2015/07/14 Python
python中解析json格式文件的方法示例
2017/05/03 Python
浅谈python中的__init__、__new__和__call__方法
2017/07/18 Python
Python错误处理操作示例
2018/07/18 Python
使用python对excle和json互相转换的示例
2018/10/23 Python
django一对多模型以及如何在前端实现详解
2019/07/24 Python
python求加权平均值的实例(附纯python写法)
2019/08/22 Python
Python Sympy计算梯度、散度和旋度的实例
2019/12/06 Python
关于Python字符串显示u...的解决方式
2020/03/06 Python
详解如何在css中引入自定义字体(font-face)
2018/05/17 HTML / CSS
TripAdvisor越南:全球领先的旅游网站
2017/09/21 全球购物
采购内勤岗位职责
2013/12/10 职场文书
论文答辩开场白大全
2015/05/27 职场文书
日本读研:怎样写好一篇日本研究计划书?
2019/07/15 职场文书
Python基础之数据类型知识汇总
2021/05/18 Python
Java面试题冲刺第十九天--数据库(4)
2021/08/07 Java/Android
恶魔之树最顶端的三颗果实 震震果实上榜,第一可以制造岩浆
2022/03/18 日漫