jQuery Grid Plugin - jqGrid

<script src="js/jquery-1.5.2.min.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.8.11.custom.min.js" type="text/javascript"></script>
<script src="js/i18n/grid.locale-en.js" type="text/javascript"></script>
<script type="text/javascript">
$.jgrid.no_legacy_api = true;
</script>
<script src="js/jquery.jqGrid.src.js" type="text/javascript"></script>

<script type="text/javascript">
$(function() {
var trades;
$.ajax({url: 'trade_options.php', dataType: 'json', async: false, success: function(data) {
var items = [':'];
$.each(data, function(i, v) {
items.push(v.value + ':' + v.display);
});
trades = items.join(';');
}});
var personnel;
$.ajax({url: 'personnel_options.php', dataType: 'json', async: false, success: function(data) {
var items = ['null:'];
$.each(data, function(i, v) {
items.push(v.value + ':' + v.display);
});
personnel = items.join(';');
}});
var lastSel = null;
var grid = $('#list');
grid.jqGrid({
url:'possiblejob_procedure_list.php?jobNo=<?= $jobNo ?>&scope=<?= $scope ?>',
datatype: "json",
/*height: '100%',*/
colNames:['ID','Display', 'Step', 'Trade', 'Personnel', 'Quote', 'Invoice', 'Description', 'Labour', 'Materials', 'Cost Allowed', 'Reserve'],
colModel:[
{name:'procedureid',index:'procedureid', hidden:true},
{name:'display',index:'display', width:53, sortable:false, editable:true, edittype:'checkbox', editoptions:{value:"1:0", defaultValue:"1"}, formatter:'checkbox'},
{name:'step',index:'step', width:45, editable:true, editrules:{required:true, integer:true}, editoptions:{}},
{name:'trade',index:'trade', width:200, sortable:false, editable:true, formatter: 'select', edittype:'select', editoptions: {
value: trades,
dataInit: function(elem) {
var colProp = grid.jqGrid('getColProp', 'personnelid');
colProp.editoptions.dataUrl = 'personnel_options.php?trade=' + escape($(elem).val());
},
dataEvents: [
{
type: 'change',
fn: function(e) {
var newOptions = ''
$.ajax({url: 'personnel_options.php', dataType: 'json', data:{trade: $(e.target).val()}, async: false, success: function(data) {
newOptions = '<option value="null"></option>';
$.each(data, function(i, v) {
newOptions += '<option value="' + v.value + '">' + v.display + '</option>';
});
}
});
if ($(e.target).is('.FormElement')) {
// form editing
var form = $(e.target).closest('form.FormGrid');
$("select#personnelid.FormElement", form[0]).html(newOptions);
} else {
// inline editing
var row = $(e.target).closest('tr.jqgrow');
var rowId = row.attr('id');
$("select#" + rowId + "_personnelid", row[0]).html(newOptions);
}
}
}
]
}, editrules:{required:true}
},
{name:'personnelid',index:'personnelid', width:200, sortable:false,
editable:false, formatter: 'select', edittype:'select', editoptions: {
value: personnel,
dataUrl: 'personnel_options.php',
buildSelect: function(data) {
var response = $.parseJSON(data);
var select = '<select>';
select += '<option value="null"></option>';
if (response && response.length) {
$.each(response, function(i, v) {
select += '<option value="' + v.value + '">' + v.display + '</option>';
});
}
return select + '</select>';
}
}, editrules:{required:false}
},
{name:'quoteno',index:'quoteno', width:55, editable:true},
{name:'invoiceno',index:'invoiceno', width:55, editable:false},
{name:'description',index:'description', width:400, sortable:false,
editable:true, edittype:"textarea", editoptions:{rows:"2",cols:"60"},
editrules:{required:true}},
{name:'labour',index:'labour', width:85, editable:true,
editrules:{required:true, number:true}, formatter:'currency', formatoptions:{prefix:'$', thousandsSeparator:','}, editoptions:{}},
{name:'materials',index:'materials', width:85, editable:true, editrules:{required:true, number:true}, formatter:'currency',
formatoptions:{prefix:'$', thousandsSeparator:','}, editoptions:{}},
{name:'costbilled',index:'costbilled', width:85, editable:true,
editoptions: {
dataEvents: [
{
type: 'keydown',
fn: function(e) {
var key = e.charCode || e.keyCode; // to support all browsers
if(key == 9) { // tab
if (lastSel) {
var ind = grid.jqGrid('getInd', lastSel, false);
var dataIDs = grid.jqGrid('getDataIDs');
if (ind < dataIDs.length) {
var nextRowID = dataIDs[ind];
grid.jqGrid('setSelection', nextRowID, true); // trigger onSelectRow
//You are at the end of the row, but not the last row. Go to next row
//$('textarea[name="description"]', ind).focus();
grid.jqGrid('editCell', nextRowID, 7, true);
} else {
addRow();
var nextRowID = dataIDs[ind];
grid.jqGrid('editCell', nextRowID, 7, true);
//You are at the end of the last row. Create new row... Selects it automatically?
}
}
return false;
}
}
}
]
}, editrules:{required:true, number:true}, formatter:'currency',
formatoptions:{prefix:'$', thousandsSeparator:','}},
{name:'reserve',index:'reserve', width:85, formatter:'currency',
formatoptions:{prefix:'$', thousandsSeparator:','}}
],
loadComplete: function(data) {

calculateProfits();
},
onSelectRow: function(id) {
if (id && id !== lastSel) {
if (saveRow(lastSel) === false) {
grid.jqGrid('setSelection', lastSel, false); // set selection back to last selected row but do not trigger onSelectRow
return;
}
lastSel = id;
}
grid.jqGrid('editRow', id, true, onEditRow, null, null, {},
afterSave, null, afterRestore);
},
editurl: "update_scope_procedures.php?jobNo=<?= $jobNo ?>&scope=<?= $scope ?>&",
rowNum: 10000,
//rowList:[10,20,30],
sortname: 'step',
sortorder: 'asc',
//viewrecords:true,
pager: '#pager',
pgbuttons:false,
pginput:false,
footerrow: true,
userDataOnFooter: true,
caption:"Job Procedure"
}).jqGrid('navGrid','#pager',
{edit: false, add: true, del: true, search: false, addfunc:function(){
addRow();
}, delfunc:function(dr) {
if (true){
if (dr === '_empty') {
grid.jqGrid('delRowData', dr);
} else {
grid.jqGrid('restoreRow', dr);
grid.jqGrid("delGridRow",dr,{reloadAfterSubmit:false, afterSubmit:function(data,postd){
var json = $.parseJSON(data.responseText);
grid.jqGrid('footerData', 'set', json.footerData);

calculateProfits();
return [true, ''];
}});
}
}
}}, //options
{}, // edit options
{}, // add options
{}, // del options
{} // search options
)
$('#labour_profit_percent').change(function() {
calculateProfits();
$.ajax({
type: 'POST',
url: 'update_job_profit_percentage.php',
data: {scope:<?= $scope ?>, jobNo:<?= $jobNo ?>, type:'labour', percentage:$(this).val()},
dataType: 'json'
});
});
$('#material_profit_percent').change(function() {
calculateProfits();
$.ajax({
type: 'POST',
url: 'update_job_profit_percentage.php',
data: {scope:<?= $scope ?>, jobNo:<?= $jobNo ?>, type:'material', percentage:$(this).val()},
dataType: 'json'
});
});
$(document).click(function(e) {
if (!$(e.target).closest("#list").length) {
var ind = grid.jqGrid('getInd', lastSel, true);
if (ind !== false && $(ind).attr('editable') === '1') {
if (grid.jqGrid('saveRow', lastSel, null, null, {}, afterSave) === false) {
grid.jqGrid('setSelection', lastSel, false);
}
}
}
});

function formatCurrency(number, decimals) {
decimals = (typeof (decimals) !== "undefined" && decimals !== null)
? decimals
: 2;
var currency = number.toFixed(decimals);
var re = /(-?[0-9]+)([0-9]{3})/;
while(re.test(currency)) {
currency = currency.replace(re, '$1,$2');
}
return currency.replace(/^(-?)([0-9,.]+)$/, '$1$$$2');
}

function calculateProfits() {

var footerData = grid.jqGrid('footerData', 'get');

var re = /[^0-9.-]/g;

var tax = <? $branch = branchDetailsByJob($jobNo); echo $branch['tax']; ?>

var labourProfit = parseFloat(footerData.labour.replace(re, '')) * (parseInt($('#labour_profit_percent').val()) / 100.0 + 1);
var materialProfit = parseFloat(footerData.materials.replace(re, '')) * (parseInt($('#material_profit_percent').val()) / 100.0 + 1);
var costBilled = parseFloat(footerData.costbilled.replace(re, ''));
var reserve = parseFloat(footerData.reserve.replace(re, ''));

var labourProfitGross = parseFloat(footerData.labour.replace(re, '')) * (parseInt($('#labour_profit_percent').val()) / 100.0);
var materialProfitGross =
parseFloat(footerData.materials.replace(re, '')) * (parseInt($('#material_profit_percent').val()) / 100.0);

//var profitEx = labourProfit + materialProfit - costBilled;
var profitEx = labourProfitGross + materialProfitGross + reserve;
var totalAmount = (labourProfit + materialProfit) * (1+tax);

$('#labour_profit').html(formatCurrency(labourProfit, 2));
$('#material_profit').html(formatCurrency(materialProfit, 2));
$('#profit_ex').html(formatCurrency(profitEx, 2));
$('#total_inc').html(formatCurrency(totalAmount, 2));

$.ajax({
type: 'POST',
url: 'update_pscopes_total_amount.php',
data:{scope:<?= $scope ?>, jobNo:<?= $jobNo ?>, "totalAmount":totalAmount},
dataType: 'json'
});
}

function afterSave(rowid, data) {
var json = $.parseJSON(data.responseText);
var postd = json.postData;
if (postd.oper === 'add') {
var datarow =
procedureid:postd.id,display:postd.display,step:postd.step,trade:postd.trade,personnelid:postd.personnelid,quoteno:postd.quoteno,description:postd.description,
labour:postd.labour,materials:postd.materials,costbilled:postd.costbilled,reserve:json.rowData.reserve};
grid.jqGrid('addRowData', postd.id, datarow, "before", "_empty");
grid.jqGrid('delRowData', "_empty");
} else {
grid.jqGrid('setRowData', rowid, json.rowData);
}
grid.jqGrid('footerData', 'set', json.footerData);

calculateProfits();
}

function afterRestore(rowid) {
if (rowid === '_empty') { // new row
grid.jqGrid('delRowData', rowid);
}
}

function onEditRow(id) {
if (id === '_empty') { // new row
var ind = grid.jqGrid('getInd', id, true);
if (ind !== false) {
$('textarea[name="description"]', ind).focus();
}
}
}

function addRow() {
if (lastSel) {
if (saveRow(lastSel) === false) {
return;
}
}

if (true){
var step = '', trade = '';
$.ajax({url: 'last_job_procedure.php', data: {jobNo: <?= $jobNo ?>},
dataType: 'json', async: false, success: function(data) {
if (data.error === false) {
step = data.step + 1;
trade = data.trade;
}
}});

var datarow = {procedureid:"_empty",display:"1",step:step,trade:trade,personnelid:"",quoteno:"",description:"",
labour:"",materials:"",costbilled:"",reserve:""};
//grid.jqGrid('restoreRow', lastSel);
lastSel = "_empty";
var success = true;
var ind = grid.jqGrid('getInd', lastSel, false);
if (ind === false) {
success = grid.jqGrid('addRowData', lastSel, datarow, "last") ;
}
if (success) {
grid.jqGrid('editRow', lastSel, true, onEditRow, null, null, {}, afterSave, null, afterRestore);
grid.jqGrid('setSelection', lastSel, false);
}
}
}

function saveRow(id) {
var ind = grid.jqGrid('getInd', id, true);
if (ind !== false && $(ind).attr('editable') === '1') {
if (grid.jqGrid('saveRow', id, null, null, {}, afterSave) === false) {
return false;
}
}
return true;
}
});
</script>