Yii2的GridView实现拖动排序功能
时间:2019-09-29
本文章向大家介绍Yii2的GridView实现拖动排序功能,主要包括Yii2的GridView实现拖动排序功能使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
本功能同样适用于其他的框架或者原生的程序(需要根据实际情况做修改)
1.本功能参考地址:https://www.cnblogs.com/xiuber/p/5945597.html
2.本功能必须先引入jquery和jquery-ui(注意引入先后顺序)
前端代码:
<?= GridView::widget([ 'dataProvider' => $dataProvider, 'columns' => [ ['class' => 'yii\grid\SerialColumn'], 'uuid', [ // 添加一个隐藏的uuid为要修改数据的主键方便获取(其实这个并没有用到只是以防万一的备选方案) 'attribute' => 'uuid', 'contentOptions' => [ 'class' => 'uuid', ], 'headerOptions' => ['style'=>'display:none'], 'contentOptions' => ['style'=>'display:none'], ], 'name', [ 'attribute' => 'order_num',//这里是排序的字段 'contentOptions' => [ 'class' => 'index',//向td中插入class方便后续修改排序的显示 ], ], ], ]); ?> <script type="text/javascript"> var old_array = new Array(); var paixu_array = new Array(); $(document).ready(function(){ var fixHelperModified = function(e, tr) { var $originals = tr.children(); var $helper = tr.clone(); $helper.children().each(function(index) { //获取宽度 $(this).width($originals.eq(index).width()) }); return $helper; }, updateIndex = function(e, ui) { $('td.index', ui.item.parent()).each(function (i) { //console.log($(this).parent().attr('data-key')); // 获取数据的主键data-key这个属性为GridView自动生成的 如果使用备选方案可以这么写console.log($(this).parent().find('td').eq(2).html()); var uuid = $(this).parent().attr('data-key'); // 将排序的顺序和主键存入数组 paixu_array[i + 1] = uuid; // 修改表格的排序显示 $(this).html(i + 1); // 调用方法将数据传入控制器 save_paixu(); }); }; // #paixu_div是包裹表格的一层div这里没有写 $("#paixu_div tbody").sortable({ helper: fixHelperModified, stop: updateIndex }).disableSelection(); }); function save_paixu() { // 获取有多少条数据 var tr_num = $(".ui-sortable tr").length; tr_num = tr_num+1; if (paixu_array.length != tr_num){ // 数组的长度要等于数据的长度+1(原因自己看数据的打印结果) return false; }else { if (paixu_array.toString() == old_array.toString()){ // 比较旧的排序于新的排序有没有改变 return false; } } // 这个判断没有用忘记删了 if(1) { new__array = paixu_array; paixu_array = []; $.ajax({ url: "ajax地址", data: {"paixu_array": new__array}, type: "post", success: function (backdata) { //console.log(backdata); var res = jQuery.parseJSON(backdata); if(res.success) { //alert(res.message); old_array = paixu_array; paixu_array = []; }else { alert(res.message); } }, error: function (error) { console.log(error); } }); } } </script>
控制器代码:
protected function findModel($id) { if (($model = ModelName::findOne($id)) !== null) { return $model; } else { throw new NotFoundHttpException('The requested page does not exist.'); } } public function actionSavePaixu(){ if(Yii::$app->request->isAjax && isset($_POST['paixu_array'])) { $paixu_array = $_POST['paixu_array']; //事物 $transation = Yii::$app->db->beginTransaction(); try{ foreach($paixu_array as $k => $v) { if ($k){ $model = $this->findModel($v); $model->order_num = $k; $model->save(); } } // 执行事务 $transation->commit(); echo json_encode(array('success'=>true,'message'=>'修改成功')); }catch(\Exception $e){ // 回滚 $transation->rollBack(); // 记录错误 echo json_encode(array('success'=>FALSE,'message'=>'修改失败')); } } }
以上代码仅供参考要注重理解含义举一反三,完全复制粘贴是不可能实现的
原文地址:https://www.cnblogs.com/night-bright/p/11609986.html
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Nuxt.js框架(SSR)学习笔记
- 也谈状态模式
- BFE.dev前端刷题1 - 实现curry()
- BFE.dev前端刷题2 - 实现curry() 并支持placeholder
- TKE集群日志解决方案之日志采集
- Newbe.Claptrap 框架入门,第三步 —— 定义 Claptrap,管理商品库存
- 以 B 站为例,聊聊站内消息系统的设计
- 微信小程序开发实战(22):上传文件和下载文件
- 语法糖--JAVA成长之路
- 使用 GitHub Action来托管AutoML软件
- Python爬虫实现自动登录、签到功能 附代码
- Recon-ng被动信息收集框架入门
- 猿实战03——猿首战之手把手教你撸品牌
- 用树莓派DIY波士顿机器狗,帮你省下50万:教程开源,人人皆可上手
- OpenCV绘制箭头线段---函数arrowedLine()使用(C++ Python)