jQuery UI可对动态表进行排序

加穆尔·米乔

我正在用JavaScript动态添加表,但是当我调用sortable时,我不断收到错误消息说.sortable不是函数

<script src="{{ asset('dashboard/js/jquery.min.js')}}"></script>
<script src="{{ asset('dashboard/js/jquery-ui.min.js')}}"></script>



$("#ok").click(function(){
 showTable($("#table"+j),arraySeparate);

  $('.forsortable').sortable({
   handle: ".handle",
   axis: "y"
   });
});

function showTable(table,array){
var row, cell;
 for(var i=0; i<array.length; i++){
     row = $( '<tr />' );
     table.append( row );
     for(var j=-12; j<array[i].length; j++){
        if (j==-12 && array[i][4]=="قطار") {
            cell = $('<td><input type="text" class="form-control unit" value="1"></td>');
            row.append( cell );
        }else if(j==-10){
            cell = $('<td><input type="text" class="form-control unit building"></td>');
            row.append( cell );
        }else if (j<0) {
            cell = $('<td><input type="text" class="form-control unit"></td>');
            row.append( cell );
        }else if (j==4) {
            switch(array[i][j]) {
                case "قطار":
                    cell = $('<td><span class="label label-danger" style="font-size:16px;">'+array[i][j]+'</span></td>');
                    break;
                case "دعم":
                    cell = $('<td><span class="label label-success" style="font-size:16px;">'+array[i][j]+'</span></td>');
                    break;
                case "كسر":
                    cell = $('<td><span class="label label-warning" style="font-size:16px;">'+array[i][j]+'</span></td>');
                    break;
                case "تنظيف":
                    cell = $('<td><span class="label label-info" style="font-size:16px;">'+array[i][j]+'</span></td>');
                    break;        
                default:
                    cell = $('<td><span class="label" style="font-size:16px;">'+array[i][j]+'</span></td>');
            }
             row.append( cell );
        }else if (j==6) {
            cell = $('<td><div style="width: 11px; height:11px; background-image: url(https://dsae.innogamescdn.com/8.125/36907/graphic/sorthandle.png); cursor:pointer" class="handle " title="يمكنك تعديل ترتيب قائمة الإرساليات من خلال سحبها بالماوس إلى المكان المطلوب."> </div><a class="remove-command" onclick="deleteRow(this)" href="#"><img src="https://dsae.innogamescdn.com/8.125/36907/graphic/delete_small.png" title="حذف الإرسالية" alt="حذف"></a></td>');
            row.append( cell );
        }else if (j==5) {
            cell = $('<td><input type="text" class="form-control miliscond"></td>');
            row.append( cell );
        }else if (j==0){ 
            cell = $('<td>'+moment(array[i][j]).format("DD / MM / YYYY  HH:mm:ss")+'</td>');
            row.append( cell );
         }else{
            cell = $('<td>'+array[i][j]+'</td>');
            row.append( cell );
         }

    }
 }
}

如果我使用表静态,则jquery-ui sortable可以完美地工作。我尝试用以下方法替换可排序的函数:

$('.forsortable').sortable();
$('.forsortable').disableSelection();

但再次给我同样的错误。如果我将可排序代码放在click函数之外,则不会出现任何错误,但可排序无法正常工作。

书面代码不佳

初始化小部件时,它只能访问DOM中当前的内容。如果您更改DOM,则必须刷新小部件。https://api.jqueryui.com/sortable/#method-refresh

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章