jquery grid

This example demonstartes a setCell and setLabel methods. We can change the contents
and style of the particular header and cell. Again with this we use a loadui option
to disable interaction when the data is loaded




HTML
...
<br/>
<br/>
<table id="method32"></table>
<div id="pmethod32"></div>
<br />
<a href="javascript:void(0)" id="shc">Change the content of header Tax</a>
<br />
<a href="javascript:void(0)" id="scc">Cahnge the tax of row 12</a>
<br />
<a href="javascript:void(0)" id="cdat">Clear the currently loaded data</a>
<br />
<script src="methods32.js" type="text/javascript"> </script>
Java Scrpt code
...
jQuery("#method32").jqGrid({       
   url:'server.php?q=1',
datatype: "xml",
   colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'],
   colModel:[
   {name:'id',index:'id', width:55},
   {name:'invdate',index:'invdate', width:90},
   {name:'name',index:'name', width:100},
   {name:'amount',index:'amount', width:80, align:"right"},
   {name:'tax',index:'tax', width:80, align:"right"},
   {name:'total',index:'total', width:80,align:"right"},
   {name:'note',index:'note', width:150, sortable:false}
   ],
   rowNum:10,
   rowList:[10,20,30],
   pager: '#pmethod32',
   sortname: 'id',
    viewrecords: true,
    sortorder: "desc",
    caption:"setLabel/setCell methods",
    multiselect: true,
    loadui: "block"
});
jQuery("#method32").jqGrid('navGrid','#pmethod32',{edit:false,add:false,del:false});

jQuery("#shc").click( function() {
$("#method32").jqGrid('setLabel',"tax","Tax Amt",{'font-weight': 'bold','font-style': 'italic'});
});

jQuery("#scc").click( function() {
$("#method32").jqGrid('setCell',"12","tax","",{'font-weight': 'bold',color: 'red','text-align':'center'});
});
jQuery("#cdat").click( function() {
$("#method32").jqGrid('clearGridData');
});

 

你可能感兴趣的:(JavaScript,html,jquery,xml,PHP)