jqGrid初学备考 _Web前端

jqGrid初学备注

最近刚刚从ExtJS转到JQuery，对于我这个大多数时间都写后台的人始终不是件太简单的事。不过看了几本JQuery的书，上网Google了一大堆插件，真是觉得当初悔不该选ExtJS这个死板的东东下手学习。

客户要一个类似ExtJS Grid的列表，自己写吧闲麻烦，找了个jqGrid的插件看了下，发现这东西确实不错，ExtJS Grid有的功能它基本上都有了，有些甚至还超出了我的预想。就是不知道实际应用起来如何，稳不稳定，暂且再当一次小白鼠吧。

http://www.trirand.com/blog/?page_id=6 ，先去官网上下下来，解压后把js和css目录下的文件拷到工程目录，另外该插件还需要JQuery UI，将JQuery，JQuery UI一并拷到目录下：

以下是各文件内容

index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Insert title here</title>
        <link rel="stylesheet" type="text/css" media="screen" href="css/ui-smoothness/jquery-ui-1.7.2.custom.css" />
        <link rel="stylesheet" type="text/css" media="screen" href="css/ui.jqgrid.css" />
        <scrip src="js/jquery-1.3.2.min.js" type="text/javascrip"></scrip>
        <scrip src="js/jquery-ui-1.7.2.min.js" type="text/javascrip"></scrip>
        <scrip src="js/plugin/jqGrid/i18n/grid.locale-en.js" type="text/javascrip"></scrip>
        <scrip src="js/plugin/jqGrid/jquery.jqGrid.min.js" type="text/javascrip"></scrip>
        <scrip src="js/index.js" type="text/javascrip"></scrip>
        <style>
            body {font-size: 12px;}
        </style>
    </head>
    <body>
        <div id="content">
            <table id="colch"></table>
            <div id="pcolch"></div>
            <div id="filter" style="margin-left:30%;display:none">Search Invoices</div>
        </div>
    </body>
</html>

index.js

$(document).ready(function() {
	var $mygrid = $("#colch").jqGrid( {
		url : 'table.xml',
		datatype : "xml",
		autowidth : true,
		viewrecords : true,
		sortable : true,
		rowNum : 10,
		height : '100%',
		pager : '#pcolch',
		sortname : 'invdate',
		sortorder : "desc",
		ExpandColumn : 'note',
		caption : "Column Chooser Example",
		rowList : [ 10, 20, 30 ],
		colNames : [ 'Inv No', 'Date', 'Client', 'Amount', 'Tax', 'Total', 'Notes' ],
		colModel : [ {
			name : 'id',
			index : 'id',
			editable : true,
			editoptions : {
				readonly : true,
				size : 10
			},
			width : 55
		}, {
			name : 'invdate',
			index : 'invdate',
			editable : true,
			searchoptions : {
				dataInit : function(el) {
					$(el).datepicker( {
						dateFormat : 'yy-mm-dd'
					});
				}
			},
			width : 90
		}, {
			name : 'name',
			index : 'name asc, invdate',
			editable : true,
			width : 100
		}, {
			name : 'amount',
			index : 'amount',
			editable : true,
			width : 80
		}, {
			name : 'tax',
			index : 'tax',
			editable : true,
			width : 80
		}, {
			name : 'total',
			index : 'total',
			editable : true,
			width : 80
		}, {
			name : 'note',
			index : 'note',
			editable : true,
			sortable : false
		} ]
	});

	$mygrid.jqGrid('navGrid', '#pcolch', {
		view : true,
		search : false
	}, {
		// edit options
		height : 290,
		reloadAfterSubmit : false,
		jqModal : false,
		closeOnEscape : true,
		bottominfo : "Fields marked with (*) are required"
	}, {
		// add options
		height : 290,
		reloadAfterSubmit : false,
		jqModal : false,
		closeOnEscape : true,
		bottominfo : "Fields marked with (*) are required",
		closeAfterAdd : true
	});

	// toggle search row button
	$("#colch").jqGrid('navButtonAdd', "#pcolch", {
		caption : "Toggle",
		title : "Toggle Search Toolbar",
		buttonicon : 'ui-icon-pin-s',
		onClickButton : function() {
			$mygrid[0].toggleToolbar();
		}
	});

	// clean search value button
	$("#colch").jqGrid('navButtonAdd', "#pcolch", {
		caption : "Clear",
		title : "Clear Search",
		buttonicon : 'ui-icon-refresh',
		onClickButton : function() {
			$mygrid[0].clearToolbar();
		}
	});

	// select display column button
	$("#colch").jqGrid('navButtonAdd', '#pcolch', {
		caption : "Columns",
		title : "Reorder Columns",
		onClickButton : function() {
			jQuery("#colch").jqGrid('columnChooser', {
				done : function(perm) {
					if (perm) {
						this.jqGrid("remapColumns", perm, true);
						var gwdth = this.jqGrid("getGridParam", "width");
						this.jqGrid("setGridWidth", gwdth);
					}
				}

			});
		}
	});

	$("#colch").jqGrid('filterToolbar');
});

table.xml

<?xml version="1.0" encoding="UTF-8"?>
<rows>
    <page>1</page>
    <total>3</total>
    <records>56</records>
    <row id='1'>
        <cell>1</cell>
        <cell>2010-01-23</cell>
        <cell>test</cell>
        <cell>note</cell>
        <cell>200.00</cell>
        <cell>10.00</cell>
        <cell>210.00</cell>
    </row>
    <row id='2'>
        <cell>2</cell>
        <cell>2010-01-23</cell>
        <cell>test</cell>
        <cell>note</cell>
        <cell>200.00</cell>
        <cell>10.00</cell>
        <cell>210.00</cell>
    </row>
    <row id='3'>
        <cell>3</cell>
        <cell>2010-01-23</cell>
        <cell>test</cell>
        <cell>note</cell>
        <cell>200.00</cell>
        <cell>10.00</cell>
        <cell>210.00</cell>
    </row>
    <row id='4'>
        <cell>4</cell>
        <cell>2010-01-23</cell>
        <cell>test</cell>
        <cell>note</cell>
        <cell>200.00</cell>
        <cell>10.00</cell>
        <cell>210.00</cell>
    </row>
    <row id='5'>
        <cell>5</cell>
        <cell>2010-01-23</cell>
        <cell>test</cell>
        <cell>note</cell>
        <cell>200.00</cell>
        <cell>10.00</cell>
        <cell>210.00</cell>
    </row>
    <row id='6'>
        <cell>6</cell>
        <cell>2010-01-23</cell>
        <cell>test</cell>
        <cell>note</cell>
        <cell>200.00</cell>
        <cell>10.00</cell>
        <cell>210.00</cell>
    </row>
    <row id='7'>
        <cell>7</cell>
        <cell>2010-01-23</cell>
        <cell>test</cell>
        <cell>note</cell>
        <cell>200.00</cell>
        <cell>10.00</cell>
        <cell>210.00</cell>
    </row>
    <row id='8'>
        <cell>8</cell>
        <cell>2010-01-23</cell>
        <cell>test</cell>
        <cell>note</cell>
        <cell>200.00</cell>
        <cell>10.00</cell>
        <cell>210.00</cell>
    </row>
    <row id='9'>
        <cell>9</cell>
        <cell>2010-01-23</cell>
        <cell>test</cell>
        <cell>note</cell>
        <cell>200.00</cell>
        <cell>10.00</cell>
        <cell>210.00</cell>
    </row>
    <row id='10'>
        <cell>10</cell>
        <cell>2010-01-23</cell>
        <cell>test</cell>
        <cell>note</cell>
        <cell>200.00</cell>
        <cell>10.00</cell>
        <cell>210.00</cell>
    </row>
</rows>

以下是最终效果截图

查看

添加

编辑

搜索

自定义显示列

1 楼 zjf_sdnu 2012-02-10

兄弟，script写错了