ESH/menu_list.php

<title>Menu List</title>
</style>

<?php 
include('top.php');

?>

<script type="text/javascript">
$(function() {
    $("#flex1").flexigrid({
            url: 'menu_list_script.php',
            dataType: 'json',
            colModel : [
                    {display: 'ID', name : 'menu_id', width : 30, sortable : true, align: 'left'},
                    {display: 'Menu Name', name : 'menu_name', width : 200, sortable : true, align: 'left'},
                    {display: 'Description', name : 'menu_description', width : 250, sortable : true, align: 'left'},
                    {display: 'URL', name : 'menu_url', width : 300, sortable : true, align: 'left'},
					{display: 'View', name : 'view_link', width : 40, sortable : false, align: 'left'},
					{display: 'Edit', name : 'edit_link', width : 40, sortable : false, align: 'left'},
					{display: 'Delete', name : 'delete_link', width : 40, sortable : false, align: 'left'}
            ],
            buttons : [
                    {name:'<b><font size="2">Menu Master</font></b>'},
					{name:'Add', bclass: 'add', onpress : doCommand},
            
                    {separator: true}
            ],
            searchitems : [
                    {display: 'Menu Name', name : 'menu_name'},
                    {display: 'Description', name : 'menu_description', isdefault: true},
                    {display: 'URL', name : 'menu_url'}
            ],
            sortname: "menu_id",
            sortorder: "asc",
            usepager: true,//pagination
           
            useRp: true,
            rp: 50,//records per page
            showTableToggleBtn: false,//toggle button for the whole table
            resizable: false,
            width: window.innerWidth,
            height: window.innerHeight-130,
            singleSelect: true
    });
});

function doCommand(com, grid) {
	if (com == 'Add') {
		//<a href='menu_list.php' class='btn btn-lg btn-primary' data-toggle='modal' data-target='#myModal'></a>
		window.open('menu_master.php?acn=add', 'Assign Navigations', '');
	}
	if (com == 'Edit') {
		$('.trSelected', grid).each(function() {
		var id = $(this).attr('id');
		id = id.substring(id.lastIndexOf('row')+3);
		alert("Edit row " + id);
		});
		
		
	} else if (com == 'Delete') {
		$('.trSelected', grid).each(function() {
		var id = $(this).attr('id');
		alert((this));
		alert(id);
		id = id.substring(id.lastIndexOf('row')+3);
		alert("Delete row " + id);
		});
	}
}

function delete_menu(button, grid) {
        var total_count = $('.trSelected', grid).length;
        var deleted     = 0;

        $.each($('.trSelected', grid), function() {
            var id = $('td:nth-child(1) div', this).html();
            $.ajax({
                url: '/api/book/' + id,
                type: 'DELETE',
                data: {},
                dataType: 'json',
                success: function() {
                    deleted++;                    
                    if (deleted == total_count) {
                        $('#books_grid').flexReload();
                    }
                }
            });
        });
    }
function add_menu(button, grid) {
        var form_div = $('#book_form');

        form_div.load('/ajax/book_form_add', null, function() {
            $('#book_form form').ajaxForm({
                url: '/ajax/book_form_add',
                success: function() {
                    form_div.hide();
                    $('#books_grid').flexReload();
                }
            });
            form_div.show();
        });
    }

    function edit_menu(button, grid) {
        
        var id = $('.trSelected td:nth-child(1) div', grid).html();
        var form_div = $('#book_form');
        var url = '/ajax/book_form_edit/' + id;                                                                                

        form_div.load(url, null, function() {
            $('#book_form form').ajaxForm({
                url: url,
                success: function() {
                    form_div.hide();
                    $('#books_grid').flexReload();
                }
            });
            form_div.show();
        });
    }

</script>
<div id="myModal" class="modal fade">
        <div class="modal-dialog">
            <div class="modal-content">
                <!-- Content will be loaded here from "remote.php" file -->
            </div>
        </div>
    </div>
<tr>

    <td height="350" valign="top" align="center">
    <table width="700px" border="0" cellspacing="0" cellpadding="0" align="center">
     <tr height="3px"></tr>
    <tr>
        <td align="justify">	
			<form name="f1" method="post" action="<?php  echo $this_script?>">
				<table width="100%" border="0" cellspacing="0" cellpadding="4" id="flex1" >
				</table>
			</form>
 		</td>
 	</tr>

 </table>

 </td>

 </tr>