jquery - Custom number formatter with hyperlink link -
i have achieved of required stuck small issue.
i using jquery 1.8.3 , jqgrid 4.4.0. has rate column acts link open modal box break details. issue values in rate column purely numbers , have used custom template set formatting values due link (custom formatter) formatting goes off.
html code:
<table id="tbcmpcontents"> <tr><td/></tr> </table> <div id="divcmpcontentspager"></div> js code:
var mydata = [ {id: "2", element: "salt", qty: "10.00", rate: "21200.00", cost: "200.00"}, {id: "3", element: "sugar", qty: "20.00", rate: "32500.00", cost: "600.00"} ], viewnumtemplate = { align: 'right', classes: 'numberpadding', formatter: 'number', formatoptions: { decimalseparator: ".", thousandsseparator: "", decimalplaces: 2, defaultvalue: '0.00' }, sortable: false, width: 100 }, getcolumnindexbyname = function (grid, columnname) { var cm = grid.jqgrid('getgridparam', 'colmodel'); (var = 0, l = cm.length; < l; i++) { if (cm[i].name === columnname) { return i; // return index } } return -1; }, gettextfromcell = function (cellnode) { var cellvalue; //check input types if (cellnode.childnodes[0].nodename == "input") { //special case handling checkbox if (cellnode.childnodes[0].type == "checkbox") { cellvalue = cellnode.childnodes[0].checked.tostring(); } else { //catch-all other inputs - text/integer/amount etc cellvalue = cellnode.childnodes[0].value; } } //check dropdown list else if (cellnode.childnodes[0].nodename == "select") { var newcell = $("select option:selected", cellnode); cellvalue = newcell[0].value; } else { cellvalue = cellnode.textcontent || cellnode.innertext; } return cellvalue; }, calculatetotal = function (grid) { var totalrate = 0.00; = getcolumnindexbyname(grid, 'rate'); $("tbody > tr.jqgrow > td:nth-child(" + (i + 1) + ")", grid[0]).each(function () { totalrate += number(gettextfromcell(this).replace(",", "")); }) grid.jqgrid('footerdata', 'set', { rate: totalrate.tofixed(2) }, false ); }; function openinmodal(id) { //open modal window render break-up of rate element. } $(document).ready(function () { var ogrid = $('#tbcmpcontents'); ogrid.jqgrid({ data: mydata, datatype: 'local', colnames: ['id', 'element', 'qty', 'rate', 'cost'], colmodel: [ { name: 'id', index: 'id', hidden: true, key: true }, { name: 'element', index: 'element', width: 120, sortable: true }, { name: 'qty', index: 'qty', width: 100, formatter: 'number', align: 'right', sortable: false }, { name: 'rate', index: 'rate', width: 100, template: viewnumtemplate, formatter: function (cellvalue, options, rowobject) { return '<a href="javascript:openinmodal(\'' + rowobject[0] + '\')">' + cellvalue + '</a>'; } }, { name: 'cost', index: 'cost', width: 100, formatter: 'number', align: 'right', sortable: false } ], autowidth: true, height: 'auto', rownum: 10, rowlist: [10, 20, 30], gridview: true, autoencode: true, ignorecase: true, sortname: 'element', sortorder: 'asc', caption: 'compound contents', editurl: 'clientarray', footerrow: true, loadonce: true, gridcomplete: function () { calculatetotal($(this)); $("#tbcmpcontents tr:last").addclass('ireg-jqgrid-lastrow'); $("tr.footrow td").addclass('ireg-jqgrid-lastrow').addclass('ireg-jqgrid-footer'); } }); }); one way out can write function format number required formatting (such thousand separator, decimal place, etc.) , apply cellvalue in custom formatter function wondering if there way in jqgrid can achieve same.
i request jqgrid expert suggest. thank in advance.
sample code: jsfiddle
Comments
Post a Comment