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

时间: 2024-10-13 02:45:22

Yii2的GridView实现拖动排序功能的相关文章

IOS UITableView拖动排序功能

UITbableView作为列表展示信息,除了展示的功能,有时还会用到删除,排序等功能,下面就来讲解一下如何实现排序. 排序是当表格进入编辑状态后,在单元格的右侧会出现一个按钮,点击按钮,就可以拖动单元格,移动位置,进行手动排序. 使用系统自带拖动排序功能的步骤: 1.让tableView进入编辑状态,也就是设置它的editing为YES 2.返回编辑模式,也就是实现UITableViewDelegate中的tableview:editingStyleForRowAtIndexPath:方法,在

vue+element拖动排序功能

项目中老大心血来潮设计了一可以拖动达到排序的功能,感觉没什么用,但是没办法,实现吧! 这功能肯定不会手撸了,直接上插件 使用Sortable.js,对vue不友好,拖拽有时候乱跳;改用vuedraggable插件,此插件依赖Sortable.js. 教程地址:https://blog.csdn.net/IT_HLM/article/details/79541741 教程地址:https://blog.csdn.net/zhaoxiang66/article/details/81003094 安装

GridView列的排序功能

首先要给GridView设置三个属性 GridView4.AllowSorting = true; GridView4.Attributes.Add("SortExpression", "ENDDATE"); GridView4.Attributes.Add("SortDirection", "ASC"); 然后写Sorting事件 /// <summary> /// GridView4的排序 /// </s

Yii 2.0排序功能的使用

在Yii2.0项目的实际开发中,经常会遇到使用Yii2.0自带的排序功能.下面是排序功能的具体使用方法. 一.设置排序规则 注意引入Sort类,如:use yii\data\Sort; // 设置排序字段 $sortObject = new Sort([ 'sort' => $sort, 'defaultOrder' => ['id' => SORT_DESC], 'attributes' => [ 'id' => [ 'asc' => ['id' => SORT

android可拖动排序GridView实现

经常使用今日头条.网易新闻的同学们应该都会注意到用于管理多个频道的可拖动排序GridView,下面介绍一下可拖动的DragGridView的实现方法.代码放在GitHub上https://github.com/zhaoyu87/DragGridView,需要的同学可以下载 DragGridView继承自GridView,当长按选中某个item进行拖动,放手更新GridView顺序: 1.重写onTouchEvent响应拖动事件:被按下时记录按下坐标:拖动时更新被拖动视图显示:放开时更新排序 2.

jquery 鼠标拖动排序Li或Table

1.前端页面 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="拖动排序Li或Table.aspx.cs" Inherits="拖动排序Li或Table" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.o

yii2之GridView小部件

GridView小部件用于展示多条数据的列表.GridView小部件的使用需要数据提供器即yii\data\ActiveDataProvider的实例作为参数,所以 第一步就是要在控制器方法中创建这个实例然后传给视图,下面以我做的一个demo为例子进行讲解. 控制器LifeController代码: //生活记录列表 public function actionIndex() { $searchModel = new Life(['scenario' => Life::SCENARIO_SEAR

GridView多列排序

1 public class WebGridView:GridView 2 { 3 属性#region 属性 4 /**//// <summary> 5 /// 是否启用或者禁止多列排序 6 /// </summary> 7 [ 8 Description("是否启用多列排序功能"), 9 Category("排序"), 10 DefaultValue("false"), 11 ] 12 public bool Allow

YII2原生SQL分页支持排序搜索

YII2默认情况下会生成一个直接操作单表的模型并且具备搜索和分页以及排序功能,在很多复杂的业务逻辑需求中,单表操作很难实现我们想要的效果,此时我要是选择的话就用纯sql来做,不用考虑那么多的对应关系,而且你得SQL语句执行效率越高,程序执行的效率也就越高. OK我们来看看怎么实现. 一.首先我们来看一个需求:在一个博客的首页中,需要显示博客列表,列表中(作者,文章标题,发表时间,文章分类,评论数量)需要显示. 二.建表 yii_article(文章):[id,title,publish_time