<script type = "text/javascript">
function dV(l) {
  return(confirm('Are you sure that you want to delete ' + l + '?'));
}
</script>

<h1>VoIP Extension List</h1>
<hr />
<form method="post">
VoIP Account: <select name="data[voip_code]" onChange="form.submit()">{VCODES}</select><br />
<table class="bTable">
<tr>
  <td>Extension</td>
  <td>Step</td>
  <td>Command</td>
  <td>Command Data</td>
  <td>Delete</td>
</tr>
{ROWS}
</table>
<input type="submit">
</form>

<link rel="stylesheet" type="text/css" href="/assets/css/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="/assets/css/easyui/themes/icon.css">
<link rel="stylesheet" type="text/css" href="/assets/css/easyui/demo/demo.css">
<script type="text/javascript" src="/assets/js/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="/assets/js/easyui/datagrid-dnd.js"></script>
	
<table id="tt" style="width:600px;height:250px" url="/admin/voip/edit_dp_json.php?data[context]={CONTEXT}&data[exten]={EXTEN}&data[edp]=dpDetails" title="Editable DataGrid" iconCls="icon-edit" singleSelect="true" fitColumns="true" toolbar="#toolbar">
		<thead>
			<tr>
				<th field="exten" width="60">Extension</th>
				<th field="priority" width="80" align="right">Step</th>
				<th field="app" width="80" align="right" editor="{type:'combobox',options:{required:true,multiple:false,url:'/admin/voip/cmd.json',valueField:'app',textField:'app'}}">Command</th>
				<th field="appdata" width="180" editor="text">Command Data</th>
				<th field="status" width="60" align="center" editor="{type:'checkbox',options:{on:'P',off:''}}">Status</th>
				<th field="action" width="80" align="center" formatter="formatAction">Action</th>
			</tr>
		</thead>
	</table>
<div id="toolbar">
    <a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="javascript:$('#tt').datagrid('appendRow',{})">New</a>
    <a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="javascript:$('#tt').edatagrid('destroyRow')">Destroy</a>
    <a href="#" class="easyui-linkbutton" iconCls="icon-save" plain="true" id="sTbl">Save</a>
    <a href="#" class="easyui-linkbutton" iconCls="icon-undo" plain="true" onclick="javascript:$('#tt').edatagrid('cancelRow')">Cancel</a>
</div>
	<script type="text/javascript">
		function formatAction(value,row,index){
			if (row.editing){
				var s = '<a href="#" onclick="saverow(this)">Save</a> ';
				var c = '<a href="#" onclick="cancelrow(this)">Cancel</a>';
				return s+c;
			} else {
				var e = '<a href="#" onclick="editrow(this)">Edit</a> ';
				var d = '<a href="#" onclick="deleterow(this)">Delete</a>';
				return e+d;
			}
		}
	</script>
	
<script>
  var dT;

  $.extend($.fn.datagrid.defaults.editors, {
    numberspinner: {
	  init: function(container, options){
		var input = $('<input type="text">').appendTo(container);
		return input.numberspinner(options);
	  },
	  destroy: function(target){
		$(target).numberspinner('destroy');
	  },
	  getValue: function(target){
		return $(target).numberspinner('getValue');
	  },
	  setValue: function(target, value){
		$(target).numberspinner('setValue',value);
	  },
	  resize: function(target, width){
		$(target).numberspinner('resize',width);
	  }
	}
  });

  $(function(){
    dT = $('#tt').datagrid({
	  onBeforeEdit:function(index,row){
		row.editing = true;
		updateActions(index);
	  },
	  onAfterEdit:function(index,row){
		row.editing = false;
		updateActions(index);
	  },
	  onCancelEdit:function(index,row){
		row.editing = false;
		updateActions(index);
      },
      idField:'priority',
      onLoadSuccess: function(){
        $(this).datagrid('enableDnd');
      },
      onDrop:function(){
        var gData = $('#tt').datagrid('getData');
        var rows = gData.total;

        for (var i = 1;i<rows;i++) {
          gData.rows[i - 1].priority = i;
        }
      $('#tt').datagrid('loadData', gData);
      }
	});

  $('#sTbl').on('click',function() {
  var dt = $('#tt').datagrid('getData').serializeArray();
  alert(dt);
  });

  });

		function updateActions(index){
			$('#tt').datagrid('updateRow',{
				index:index,
				row:{}
			});
		}
		function getRowIndex(target){
			var tr = $(target).closest('tr.datagrid-row');
			return parseInt(tr.attr('datagrid-row-index'));
		}
		function editrow(target){
			$('#tt').datagrid('beginEdit', getRowIndex(target));
		}
		function deleterow(target){
			$.messager.confirm('Confirm','Are you sure?',function(r){
				if (r){
					$('#tt').datagrid('deleteRow', getRowIndex(target));
				}
			});
		}
		function saverow(target){
			$('#tt').datagrid('endEdit', getRowIndex(target));
		}
		function cancelrow(target){
			$('#tt').datagrid('cancelEdit', getRowIndex(target));
		}

	</script>