如何在PHP中添加,编辑和删除jQuery Flexigrid中的行?

时间:2013-02-24 22:37:23

标签: jquery jquery-plugins flexigrid

我正在使用jQuery Flexigrid。我找不到足够的文档来支持Flexigrid。我在网格中添加了一个按钮。点击按钮,我无法获得添加/编辑表单。我的代码如下。

<script type="text/javascript">
    var $nf = jQuery.noConflict();
</script>

Flexigrid代码

colModel : [{display: 'Sub Sub Category Code', name : 'sub_sub_category_code', width : 170, sortable : true, align: 'left'},
            {display: 'Category Code', name : 'category_code', width : 110, sortable : true, align: 'left'},
            {display: 'Sub Category Code', name : 'sub_category_code', width : 140, sortable : true, align: 'left'},
            {display: 'Sub Sub Category Name', name : 'sub_sub_category_name', width : 170, sortable : true, align: 'left'},
            {display: 'Status', name : 'status', width : 48, sortable : true, align: 'left'}
           ],
buttons  : [{name: 'Add', bclass: 'add', onpress : test},
            {name: 'Edit', bclass: 'edit', onpress : test},
            {name: 'Delete', bclass: 'delete', onpress : test},{separator: true}
           ],

用于添加/编辑的jQuery代码&amp;删除

function getid(com,grid){
    var id='';
    $('.trSelected', grid).each(function() {
        id = $(this).attr("id");
        id = id.substring(id.lastIndexOf('row')+3);
    });
    alert(id);
    return id;
}
$nf(document).ready(function(){
    //Define configuration object
    var dialogAdd = {
         modal: true,
         bgiframe: true,
         autoOpen: false,
         height: 370,
         width: 640,
         draggable: true,
         resizeable: true,
         open: function(com,grid) {
             //Display correct dialog content
             $("#formadd").load("../FlexiAdd.php");
         }
    };
    $nf("#formadd").dialog(dialogAdd); //End dialog
    var dialogEdit = {
         modal: true,
         bgiframe: true,
         autoOpen: false,
         height: 370,
         width: 640,
         draggable: true,
         resizeable: true,
         open: function(com,grid) {
             //Display correct dialog content
             $("#formedit").load("../FlexiAdd.php?id="+getid()+"");
         }
    };
    $nf("#formedit").dialog(dialogEdit); //End dialog
});

function test(com,grid)
{
    if (com=='Delete')
    {
        if($('.trSelected',grid).length>0){
            if(confirm('Delete ' + $('.trSelected',grid).length + ' items?')){
                var items = $('.trSelected',grid);
                var itemlist ='';
                for(i=0;i<items.length;i++){
                    itemlist+= items[i].id.substr(3)+",";
                }
                $.ajax({
                    type: "POST",
                    dataType: "json",
                    url: "delete.php",
                    data: "items="+itemlist,
                    success: function(data){
                        alert("Query: "+data.query+" - Total affected rows: "+data.total);
                        $(".sub_sub_category").flexReload();
                    }
                });
            }
        } else {
             return false;
        }
    }
    else if (com=='Add')
    {
        $nf("#formadd").dialog('open');
    }
    else if (com=='Edit')
    {
        if($('.trSelected',grid).length>0){
            $nf("#formedit").dialog('open');
        }
        else {
            return false;
        }
    }
}

HTML code

<table class="sub_sub_category" id="sub_sub_category" style="display: none"></table>

<br /><br />

<div id="formadd" style="display:none" title=""></div>
<div id="formedit" style="display:none" title=""></div>

我不确定的一件事是我的jQuery是否正确。我尝试修复它两天,因为我是jQuery的新手,我没有找到足够的Flexigrid文档,我无法解决它。我该如何解决这个问题?

0 个答案:

没有答案