Tutorials Guru: Populate JSON data to table datagrid

Populate JSON data to table datagrid

Create the table datagrid :

<table class="easyui-datagrid" title="Basic DataGrid" style="width:100%;height:100%" id="kwitansi" name="kwitansi"

data-options="rownumbers:true,singleSelect:true,remoteSort:false,fitColumns: true,showFooter: true">

<thead>

<tr>

<th data-options="field:'Sapid',width:60,sortable:true">Sapid</th>

<th data-options="field:'PsgrName',width:140,sortable:true">PsgrName</th>

<th data-options="field:'PurposeType',width:150,align:'right',sortable:true">PurposeType</th>

<th data-options="field:'Departure',width:100,align:'right',sortable:true">Departure</th>

<th data-options="field:'Arival',width:100,sortable:true">Arival</th>

<th data-options="field:'Section',width:150,align:'right',sortable:true">Section</th>

<th data-options="field:'inputName',width:130,align:'right',sortable:true">Inputer Name</th>

<th data-options="field:'inputSapid',width:100,align:'right',sortable:true">Inputer Sapid</th>

<th data-options="field:'intStatus',width:70,align:'right',sortable:true">Status</th>

</tr>

</thead>

</table>

The Ajax Call from a Form parameter.

var urls = '/EofReportService/GetKwitansiConfirmGuest';

var formData = $('#searchForm').serializeObject();

var a =0;

var b = 0;

$.ajax({

url: urls,

type: 'POST',

data: formData,

success: function (result) {

//$.messager.alert('Tiket Kwitansi', "hasil " + result.length);

for (var i = 0; i < result.length; i++) {

a += result[i].Cost;

if (result[i].Cost == 0) {

b++;

}

//$('#').textbox.value = a;

$('#totalp').textbox('setValue', result.length);

$('#totalo').textbox('setValue', b);

$('#total').textbox('setValue', a);

$('#kwitansi').datagrid({ data: result });

$('#w').window('open');

}

});

The Controller class and the method that used for Ajax call get Json result data

public JsonResult GetKwitansiConfirmGuest(FormCollection frm)

{

String PsgrType = frm["PasgrType"];

String BillTo = frm["BillTo"];

String dateStart = frm["Date_Start"];

String dateEnd = frm["Date_End"];

String Section = frm["costcenter"];

String userinSAPid = frm["SAPid"];

String strReportType = frm["strReportType"];

string proses = "";

if (PsgrType == "GATiketGuest") { proses="cetak";}

else if (PsgrType == "GADBoatGuestKwitansi") { proses="kwitansi";}

else { proses="list";}

if (dateStart != "" && dateEnd != "")

{

String filter = "";

filter += " and a.datPickupTime between '" + dateStart + "' and '" + dateEnd + "' ";

if (BillTo != "any" && BillTo == "CostCenter")

{

filter += " and a.strBillTo = 'CostCenter'";

}

else if (BillTo != "any" && BillTo == "Proj")

{

filter += " and a.strBillTo = 'Proj'";

}

if (userinSAPid != "" && userinSAPid != null && userinSAPid != " ")

{

filter += " and adm_users.strSAPCode='" + userinSAPid + "' ";

}

ItemBoatTiketKwitansi = PopReportGuestBoatList(filter, proses);

}

return Json(ItemBoatTiketKwitansi);

}

these method implemented inside EofReportService (Class Conroller), that used in Ajax call url "var urls = '/EofReportService/GetKwitansiConfirmGuest'; "

that will return JSON data as result, where the result is stored in "ItemBoatTiketKwitansi " variable of List<Object>

where the Object contain persisten entity of datagrid field: