jqgrid学习Word文件下载.docx
- 文档编号:17941899
- 上传时间:2022-12-12
- 格式:DOCX
- 页数:18
- 大小:23.52KB
jqgrid学习Word文件下载.docx
《jqgrid学习Word文件下载.docx》由会员分享,可在线阅读,更多相关《jqgrid学习Word文件下载.docx(18页珍藏版)》请在冰豆网上搜索。
setGridParam({datatype:
设置新的datatype(xml,json)
形式2:
jQuery('
#tableID'
).jqGrid('
getGridParam'
'
url'
))
jQuery("
#tableID"
setGridParam'
{page:
2}).trigger("
)
二、jqGridcolModel表体结构配置
name 必要的属性,具有唯一标识性,如在弹出的editform窗体中,将作为input的name属性index为排序用,最方便的是设为数据库字段width150,宽度,数值alignleft,center,rightdetefmtdate:
trueeditableflaseeditoptionsedittype为先决条件,此为值,[]editrules编辑规范edittypetext,textarea,select,checkbox,passwordformatoptionsformatterhidedlgfalse(appearinthemodaldialog)hiddenfalse在加载时是否隐藏列jsonmap声明json的格式keyfalselabel当没有设置colNames时,在列里用此代替,此项也为空时,就是name代替resizabletrue,列宽可调节searchtrue,可搜索sortabletrue,可排序sorttypetext,int,float,date,排序子段类型xmlmap声明xml的格式
三、一个例子[ArrayData]
//<
tableid="
list4"
>
<
/table>
jQuery("
#list4"
).jqGrid({
datatype:
"
local"
height:
250,
colNames:
['
InvNo'
Date'
Client'
Amount'
Tax'
Total'
Notes'
],
colModel:
[
{name:
'
id'
index:
width:
60,sorttype:
"
int"
},
invdate'
90,sorttype:
date"
name'
100},
amount'
80,align:
right"
sorttype:
float"
tax'
total'
80,align:
note'
150,sortable:
false}
multiselect:
true,
caption:
ManipulatingArrayData"
});
varmydata=[
{id:
1"
invdate:
2007-10-01"
name:
test"
note:
note"
amount:
200.00"
tax:
10.00"
total:
210.00"
2"
2007-10-02"
test2"
note2"
300.00"
20.00"
320.00"
3"
2007-09-01"
test3"
note3"
400.00"
30.00"
430.00"
4"
2007-10-04"
5"
2007-10-05"
6"
2007-09-06"
7"
8"
2007-10-03"
9"
}
];
for(vari=0;
i<
=mydata.length;
i++)
addRowData'
i+1,mydata[i]);
四、行操作
//获取选中行数据
#a1"
).click(function(){
varid=jQuery("
#list5"
selrow'
);
if(id){
varret=jQuery("
getRowData'
id);
alert("
id="
+ret.id+"
invdate="
+ret.invdate+"
..."
}else{alert("
请选择一行!
//删除
#a2"
varsu=jQuery("
delRowData'
12);
if(su)alert("
成功删除第12行"
elsealert("
删除失败"
//更新
#a3"
setRowData'
11,{amount:
333.00"
33.00"
366.00"
imgsrc='
images/user1.gif'
/>
更新成功"
更新失败"
//新增
#a4"
vardatarow={id:
99"
};
99,datarow);
新增成功"
新增失败"
五、进阶
多选
HTML
...
list9"
divid="
pager9"
/div>
br/>
ahref="
javascript:
void(0)"
m1"
GetSelectedid'
s<
/a>
id="
m1s"
Select(Unselect)row13<
JavaScrptcode
#list9"
url:
server.php?
q=2&
nd='
+newDate().getTime(),
json"
55},
90},
rowNum:
10,
rowList:
[10,20,30],
pager:
'
#pager9'
sortname:
recordpos:
left'
viewrecords:
sortorder:
desc"
MultiSelectExample"
navGrid'
{add:
false,del:
false,edit:
false,position:
right'
#m1"
).click(function(){
vars;
s=jQuery("
selarrrow'
alert(s);
#m1s"
setSelection'
"
13"
主从表
InvoiceHeader
list10"
pager10"
InvoiceDetail
list10_d"
pager10_d"
ms1"
#list10"
q=2'
#pager10'
false,
InvoiceHeader"
onSelectRow:
function(ids){
if(ids==null){
ids=0;
if(jQuery("
#list10_d"
records'
)>
0)
{
{url:
subgrid.php?
q=1&
+ids,page:
1});
setCaption'
InvoiceDetail:
+ids)
.trigger('
reloadGrid'
}else{
false});
100,
id=0'
No'
Item'
Qty'
Unit'
LineTotal'
num'
item'
180},
qty'
unit'
linetotal'
sortable:
false,search:
5,
[5,10,20],
#pager10_d'
asc"
InvoiceDetail"
}).navGrid('
#ms1"
可展开的下级表
list11"
pager11"
scriptsrc="
subgrid.js"
type="
text/javascript"
/script>
#list11"
q=1'
xml"
200,
#pager11'
subGrid:
subGridUrl:
subGridModel:
[{name:
['
width:
[55,200,80,80,80]}
SubgridExample"
壳展开的下级表2
listsg11"
pagersg11"
subgrid_grid.js"
#listsg11"
190,
8,
[8,10,20,30],
#pagersg11'
subGrid:
GridasSubgrid"
subGridRowExpanded:
function(subgrid_id,row_id){
//wepasstwoparameters
//subgrid_idisaidofthedivtagcreatedwhitinatabledata
//theidofthiselemenetisacombinationofthe"
sg_"
+idoftherow
//therow_idistheidoftherow
//Ifwewantopassadditinalparameterstotheurlwecanuse
//amethodgetRowData(row_id)-whichreturnsassociativearrayintypename-value
//herewecaneasyconstructtheflowing
varsubgrid_table_id,pager_id;
subgrid_table_id=subgrid_id+"
_t"
;
pager_id="
p_"
+subgrid_table_id;
$("
#"
+subgrid_id).html(
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- jqgrid 学习