jqGrid single selection
by bizamajig
HTML
<script src="http://trirand.com/blog/jqgrid/js/i18n/grid.locale-en.js"></script>
<script src="http://trirand.com/blog/jqgrid/js/jquery.jqGrid.min.js"></script>
<link rel="stylesheet" href="http://trirand.com/blog/jqgrid/themes/redmond/jquery-ui-1.8.1.custom.css">
<link rel="stylesheet" href="http://trirand.com/blog/jqgrid/themes/ui.jqgrid.css">
<table id="list"></table>
<div id="pager"></div>
<br />
JavaScript
var mydata = [
{
id: "1",
invdate: "2010-05-24",
name: "test",
note: "note",
tax: "10.00",
total: "2111.00"},
{
id: "2",
invdate: "2010-05-25",
name: "test2",
note: "note2",
tax: "20.00",
total: "320.00"},
{
id: "3",
invdate: "2007-09-01",
name: "test3",
note: "note3",
tax: "30.00",
total: "430.00"},
{
id: "4",
invdate: "2007-10-04",
name: "test",
note: "note",
tax: "10.00",
total: "210.00"},
{
id: "5",
invdate: "2007-10-05",
name: "test2",
note: "note2",
tax: "20.00",
total: "320.00"},
];
jQuery("#list").jqGrid({
data: mydata,
datatype: "local",
height: 150,
rowNum: 999999,
scroll: true,
colNames: ['Inv No', 'Date', 'Client', 'Amount', 'Tax', 'Total', 'Action'],
colModel: [
{
name: 'id',
index: 'id',
editable:true,
width: 60,
sorttype: "int"},
{
name: 'invdate',
index: 'invdate',
editable:true,
width: 90,
sorttype: "date",
formatter: "date"},
{
name: 'name',
index: 'name',
editable:true,
formatter:addlink,
unformat:unaddlink,
width: 100},
{
name: 'amount',
index: 'amount',
width: 80,
align: "right",
editable:true,
sorttype: "float",
formatter: "number"},
{
name: 'tax',
index: 'tax',
width: 80,
editable:true,
align: "right",
sorttype: "float"},
{
name: 'total',
index: 'total',
width: 80,
editable:true,
align: "right",
sorttype: "float"},
{
name: 'action',
index: 'action',
width: 150,
sortable: false,
formatter:'actions',
formatoptions:{keys:true},
search:false}
],
pager: "#pager",
viewrecords: true,
multiselect: true,
...