本功能同样适用于其他的框架或者原生的程序(需要根据实际情况做修改)
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