|
jqGrig and Chosen plugin
#38127583
Ссылка:
Ссылка на сообщение:
Ссылка с названием темы:
|
|
|
|
Здравствуйте.
Подскажите, можно ли использовать плагин Chosen в выпадающем списке при редактировании таблицы в jqGrid?
Код:
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jqGrid & Chosen</title>
<link rel="stylesheet" type="text/css" media="screen" href="http://trirand.com/blog/jqgrid/themes/redmond/jquery-ui-custom.css" />
<link rel="stylesheet" type="text/css" media="screen" href="http://trirand.com/blog/jqgrid/themes/ui.jqgrid.css" />
<link rel="stylesheet" href="http://harvesthq.github.com/chosen/chosen/chosen.css" />
<script src="http://trirand.com/blog/jqgrid/js/jquery.js" type="text/javascript"></script>
<script src="http://trirand.com/blog/jqgrid/js/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="http://trirand.com/blog/jqgrid/js/jquery.jqGrid.js" type="text/javascript"></script>
</head>
<body>
<div>
<select id="sel1" class="chzn-select" style="width:220px;">
<option value=1>Audi A6</option>
<option value=2>BMW 3</option>
<option value=3>Toyota Corolla</option>
</select>
</div><br>
<table id="list4" cellpadding="0" cellspacing="0" class="scroll"></table>
<div id="pager1" class="scroll"></div>
<script type="text/javascript">
var lastsel;
jQuery("#list4").jqGrid({
datatype: "local",
height: 250,
colNames:['Inv No', 'Model', 'Tax'],
colModel:[
{name:'id',index:'id', width:60, sorttype:"int"},
{name:'name',index:'name', width:100, editable:true, edittype:'select',editoptions:{value:'1:Audi A6; 2:BMW 3; 3:Toyota Corolla' }},
{name:'tax',index:'tax', width:80, align:"right",sorttype:"float", editable:true,editoptions:{size:20}}
],
caption: "jqGrig & Chosen plugin",
ondblClickRow: function(id){
if(id ){ //&& id!==lastsel
jQuery('#list4').jqGrid('restoreRow',lastsel);
jQuery('#list4').jqGrid('editRow',id,true);
lastsel=id;
}
},
editurl:"index.htm",
pager: jQuery('#pager1')
}).navGrid('#pager1',
{edit:true,add:false,del:false,view:false}, //options/
{savekey: [true,13], width:300,height:300,closeOnEscape:true,reloadAfterSubmit:false,editCaption: "Update",bCancel: "Cancel",closeAfterEdit : true, dataheight:200} // edit options
);
var mydata = [
{id:"1",name:"Audi A6",tax:"56000.00"},
{id:"2",name:"BMW 3",tax:"70000.00"},
{id:"3",name:"Toyota Corolla",tax:"27000.00"},
{id:"4",name:"Audi A6",tax:"56000.00"},
{id:"5",name:"BMW 3",tax:"70000.00"},
{id:"6",name:"Toyota Corolla",tax:"27000.00"},
{id:"7",name:"Audi A6",tax:"56000.00"},
{id:"8",name:"BMW 3",tax:"70000.00"},
{id:"9",name:"Toyota Corolla",tax:"27000.00"}
];
for(var i=0;i<=mydata.length;i++)
jQuery("#list4").jqGrid('addRowData',i+1,mydata[i]
);
</script>
<script src="http://harvesthq.github.com/chosen/chosen/chosen.jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(".chzn-select").chosen();
</script>
</body>
</html>
Спасибо! |
|
|
