jqueryeasyui 对文本框操作

jqueryGrid

(2012-09-18 09:48:54)

标签： 杂谈

jqueryGrid 例子

<div id="userSearch"> </div>
<table id="userList"></table>
<div id="userPager"></div>
</div>

<script type="text/javascript">
$(function(){
$("#jtable #userList").jqGrid({
imgpath:"scripts/jqGrid/images",
caption:"用户列表",
url:"user/userlist.action",
mtype:"post",
datatype:"json",
jsonReader:{repeatitems:false,
id:"id",
page:"currentPage",
total:"pageCount",
records:"rowCount"},
prmNames:{page:"pageTable.currentPage",
rows:"pageTable.pageSize",
sort:"pageTable.sort",
order:"pageTable.order"

},
loadError:function(xhr,st,err){
alert(st);
},
sortname:"beginTime",
sortorder:"desc",
rowNum:10,
rowList:[10,20,50],
height:"auto",
width:1000,
shrinkToFit:true,
multiselect:false,
viewrecords:true,
colNames:['id','name','password','sex','age'],
colModel:[{name:"id",index:"id",width:200,hidden:false,search:true,sortable:true},
{name:"name",index:"name",width:60,hidden:false,search:true,defval:'name2',sortable:true},
{name:"password",index:"password",width:60,search:true,sorttable:true},
{name:"sex",index:"sex",width:60,search:true,sorttable:true},
{name:"age",index:"age",width:60,search:true,sorttable:true}],
pager:$("#userPager")

});
$("#userList").navGrid("#userPager",{refresh:true,edit:false,add:false,del:false,search:false});
$("#userSearch").filterGrid("#userList",{
gridModel:true,
gridNames:true,
formtype:"horizontal",
enableSearch:true,
serachButton:"查询",
enableClear:true,
clearButton:"重置",
autosearch:false
});


})
</script>

对上面的进行解析

ColModel 是jqGrid里最重要的一个属性，设置表格列的属性。
用法：

Java代码

1. jQuery("#gridid").jqGrid({
2. ...
3. colModel: [ {name:'name1', index:'index1'...}, {...}, ... ],
4. ...
5. });

属性	数据类型	备注	默认值
align	string	定义单元格对齐方式；可选值：left, center, right.	left
classes	string	设置列的css。多个class之间用空格分隔，如：'class1 class2' 。表格默认的css属性是ui-ellipsis	empty string
datefmt	string	对日期列进行格式化。”/”, ”-”, and ”.”都是有效的日期分隔符。y,Y,yyyy 年YY, yy 月m,mm for monthsd,dd 日.	ISO Date (Y-m-d)
defval	string	查询字段的默认值	空
editable	boolean	单元格是否可编辑	false
editoptions	array	对列进行编辑时设置的一些属性	empty array
editrules	array	对于可编辑单元格的一些额外属性设置	empty array
edittype	string	可以编辑的类型。可选值：text, textarea, select, checkbox, password, button, image and file.	text
fixed	boolean	列宽度是否要固定不可变	false
formoptions	array	对于form进行编辑时的属性设置	empty
formatoptions	array	对某些列进行格式化的设置	none
formatter	mixed	对列进行格式化时设置的函数名或者类型	none
hidedlg	boolean	是否显示或者隐藏此列	false
hidden	boolean	在初始化表格时是否要隐藏此列	false
index	string	当排序时定义排序字段名称的索引，参数名为sidx	empty string
jsonmap	string	定义了返回的json数据映射	none
key	boolean	当从服务器端返回的数据中没有id时，将此作为唯一rowid使用，默认只能有一个id属性	false
label	string	如果colNames为空则用此值来作为列的显示名称，如果都没有设置则使用name 值	none
name	string	必输项，表格列的名称，所有关键字，保留字都不能作为名称使用包括subgrid, cb and rn.	Required
resizable	boolean	是否可以被resizable	true
search	boolean	在搜索模式下，定义此列是否可以作为搜索列	true
searchoptions	array	设置搜索参数	empty
sortable	boolean	是否可排序	true
sorttype	string	用在当datatype为local时，定义搜索列的类型，可选值：int/integer - 对integer排序float/number/currency - 排序数字date - 排序日期text - 排序文本	text
stype	string	定义搜索元素的类型	text
surl	string	搜索数据时的url	empty string
width	number	默认列的宽度，只能是象素值，不能是百分比	150
xmlmap	string	定义当前列跟返回的xml数据之间的映射关系	none
unformat	function	‘unformat’单元格值	null

有一些参数当表格初始化完成后是不能被修改的：
name
width
resizable
label (method avail.)