working jqGrid Example

by Oleg Kiriljuk

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/base/jquery-ui.css">
<link rel="stylesheet" href="//cdn.jsdelivr.net/free-jqgrid/latest/css/ui.jqgrid.css">
<script src="//cdn.jsdelivr.net/free-jqgrid/latest/js/jquery.jqgrid.src.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.css">
<table id="list"></table>

JavaScript

function dropdownFormatter(cellValue, options, rowObject) {
	console.info(cellValue, options, rowObject);
	console.log(rowObject.delivery_boy_id);

	var control = "<select class='form-control'><option value>Select</option>";
	$.each(cellValue, function (idx, obj){
		if (obj.id == rowObject.delivery_boy_id) {
			control += "<option value='" + obj.id + "' selected='selected'>" + obj.name + "</option>";
		} else {
			control += "<option value='" + obj.id + "'>" + obj.name + "</option>";                            
		}
	});
	control += "</select>";
	return control;
}

function statusFormatter (cellValue, options, rowObject) {
	switch(cellValue) {
		case "ordered":
			return "Ordered";
		case "received":
			return "Received";
		case "laundry_entry":
			return "Laundry Entry";
		case "laundry_exit":
			return "Laundry Exit";
		case "delivered":
			return "Delivered";
	}
}

function actionFormatter(cellValue, options, rowObject) {
	console.log("actionFormatter");
	console.log(rowObject);
	console.log(options);
	var control = '<div class="actions" data-order-id="' + rowObject.order_no + '"><i class="save-row fa fa-floppy-o fa-lg"> </i><i class="edit-row fa fa-pencil fa-lg"></i> <i class="view-row fa fa-eye fa-lg"></i></div>';

	return control;
}

$(document).ready(function () {

	jQuery("#list").jqGrid({
		url:'https://api.myjson.com/bins/22vo1',
		datatype: "json",
		colNames:['Order No','Address', 'Pincode', 'Phone Number', "Pickup Date", "Pickup Time", "Delivery Date", "Delivery Time", "Status", "Delivery Boys", "Actions"],
		colModel:[
			{name: 'order_no', width: 130},
			{name: 'user_address', width: 400, search: false},
			{name: 'pincode', width: 110, search: false},
			{name: 'user_phone_number', width: 180, search: false},
			{name: 'pickup_date'},
			{name: 'pickup_time'},
			{name: 'delivery_date', width: 170},
			{name: 'delivery_time', width: 170},
			{
				name: 'status', formatter: statusFormatter, stype: 'select', searchoptions: { 
					sopt: ['eq'],...