반응형
jqGrid 최신버전이 업데이트되어서 새롭게 작성한 소스코드
환경 : LAMP, UTF-8
기능
- 한글화 적용
- 인라인 에디팅
- 엑셀 다운로드
- 검색
- 다중선택삭제 구현
환경 : LAMP, UTF-8
기능
- 한글화 적용
- 인라인 에디팅
- 엑셀 다운로드
- 검색
- 다중선택삭제 구현
jqgrid-3.6.5.zip
<!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="ko">
<head>
<link rel="stylesheet" type="text/css" media="screen" href="/jqgrid/themes/redmond/jquery-ui-1.7.1.custom.css" />
<link rel="stylesheet" type="text/css" media="screen" href="/jqgrid/themes/ui.jqgrid.css" />
<script src="/jqgrid/js/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="/jqgrid/js/i18n/grid.locale-kr.js" type="text/javascript"></script>
<script src="/jqgrid/js/jquery.jqGrid.min.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" media="screen" href="/jqgrid/themes/ui.datepicker.css" />
<script type="text/javascript" src="/jqui/development-bundle/ui/ui.datepicker.js"></script>
<script type="text/javascript" src="/jqui/development-bundle/ui/i18n/ui.datepicker-ko.js"></script>
</head>
<body>
<table id="htmlTable" class="scroll"></table>
<div id="htmlPager" class="scroll"></div>
<script type="text/javascript">
var lastsel;
jQuery(document).ready(function(){
jQuery("#htmlTable").jqGrid({
url:'/jqgrid/jqgridCRUD.php',
datatype: 'json',
mtype: 'POST',
colNames:['PK(sno)','등록일', '권역','사이트','URL','siteID','제품군','제품명','컨텐츠유형','컨텐츠포멧','활동유형','조회수','소속그룹'],
colModel :[
{name:'sno',index:'sno',width:30},
{name:'sdate',index:'sdate',width:70,editable:true,sorttype:"date"},
{name:'sarea',index:'sarea',width:70,align:'left',editable:true},
{name:'site',index:'site',width:70,align:'left',editable:true},
{name:'siteurl',index:'siteurl',width:250,align:'left',editable:true ,formatter: 'link',formatoptions:{target:"_blank"}
,editoptions:{size:'40',maxlength:'255'}
},
{name:'seedid',index:'seedid',width:100,align:'left',editable:true,formatter: 'link'},
{name:'prodcat',index:'prodcat',width:50,align:'left',editable:true,edittype:'select',editoptions:{value:"CAM:CAM;DSC:DSC"},editrules:{required:true}},
{name:'pname',index:'pname',width:50,sortable:true,editable:true},
{name:'contype',index:'contype',width:60,align:'center',editable:true,edittype:'select',editoptions:{value:"Feature:Feature;Review:Review;Interview:Interview;Unboxing:Unboxing;Lifestyle Img:Lifestyle Img;Preview:Preview;Article:Article;Event:Event;Exhibition:Exhibition;News:News"},editrules:{required:true}
},
{name:'conformat',index:'conformat',width:60,align:'center',editable:true, edittype:'select',editoptions:{value:"Video:Video;Document:Document;Image:Image;Text:Text"},editrules:{required:true}},
{name:'seedtype',index:'seedtype',width:60,align:'center',editable:true, edittype:'select',editoptions:{value:"Upload:Upload;Comment:Comment;Diary:Diary;Review:Review;Url:Url;Etc:Etc"},editrules:{required:true}},
{name:'sitehit',index:'sitehit',width:30,align:'center',editable:true},
{name:'grpid',index:'grpid',width:50,align:'left',editable:true},
],
pager: jQuery('#htmlPager'),
loadtext: 'Loading Data...',
height: 350,
width: 1000,
rowNum:40,
rowList:[10,15,20,30,50],
sortname: 'sno',
sortorder: "asc",
viewrecords: true,
multiselect: true,
onSelectRow: function(id){
if(id && id!==lastsel){
jQuery('#htmlTable').saveRow(lastsel,true,null,checksave);
jQuery('#htmlTable').editRow(id,true,pickdates);
lastsel=id;
}
},
cellurl:'/jqgrid/jqgridCRUD.php?act=inlineEdit',
editurl:'/jqgrid/jqgridCRUD.php',
caption: 'Viral Marketing Seeding List - inline Editing',
}).navGrid('#htmlPager',{edit:false,add:true,del:true,search:true})
.navButtonAdd("#htmlPager",{ caption:'', buttonimg:'/image/excel.png', onClickButton:function(){ document.down.submit();},title:'Excel 다운로드'})
;
});/* end of on ready event */
function pickdates(id){ jQuery("#"+id+"_sdate","#htmlTable").datepicker({dateFormat:"yymmdd"}); }
function checksave(result)
{
if(result.responseText!='') alert(result.responseText);
else $("#htmlTable").trigger("reloadGrid");
}
</script>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko">
<head>
<link rel="stylesheet" type="text/css" media="screen" href="/jqgrid/themes/redmond/jquery-ui-1.7.1.custom.css" />
<link rel="stylesheet" type="text/css" media="screen" href="/jqgrid/themes/ui.jqgrid.css" />
<script src="/jqgrid/js/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="/jqgrid/js/i18n/grid.locale-kr.js" type="text/javascript"></script>
<script src="/jqgrid/js/jquery.jqGrid.min.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" media="screen" href="/jqgrid/themes/ui.datepicker.css" />
<script type="text/javascript" src="/jqui/development-bundle/ui/ui.datepicker.js"></script>
<script type="text/javascript" src="/jqui/development-bundle/ui/i18n/ui.datepicker-ko.js"></script>
</head>
<body>
<table id="htmlTable" class="scroll"></table>
<div id="htmlPager" class="scroll"></div>
<script type="text/javascript">
var lastsel;
jQuery(document).ready(function(){
jQuery("#htmlTable").jqGrid({
url:'/jqgrid/jqgridCRUD.php',
datatype: 'json',
mtype: 'POST',
colNames:['PK(sno)','등록일', '권역','사이트','URL','siteID','제품군','제품명','컨텐츠유형','컨텐츠포멧','활동유형','조회수','소속그룹'],
colModel :[
{name:'sno',index:'sno',width:30},
{name:'sdate',index:'sdate',width:70,editable:true,sorttype:"date"},
{name:'sarea',index:'sarea',width:70,align:'left',editable:true},
{name:'site',index:'site',width:70,align:'left',editable:true},
{name:'siteurl',index:'siteurl',width:250,align:'left',editable:true ,formatter: 'link',formatoptions:{target:"_blank"}
,editoptions:{size:'40',maxlength:'255'}
},
{name:'seedid',index:'seedid',width:100,align:'left',editable:true,formatter: 'link'},
{name:'prodcat',index:'prodcat',width:50,align:'left',editable:true,edittype:'select',editoptions:{value:"CAM:CAM;DSC:DSC"},editrules:{required:true}},
{name:'pname',index:'pname',width:50,sortable:true,editable:true},
{name:'contype',index:'contype',width:60,align:'center',editable:true,edittype:'select',editoptions:{value:"Feature:Feature;Review:Review;Interview:Interview;Unboxing:Unboxing;Lifestyle Img:Lifestyle Img;Preview:Preview;Article:Article;Event:Event;Exhibition:Exhibition;News:News"},editrules:{required:true}
},
{name:'conformat',index:'conformat',width:60,align:'center',editable:true, edittype:'select',editoptions:{value:"Video:Video;Document:Document;Image:Image;Text:Text"},editrules:{required:true}},
{name:'seedtype',index:'seedtype',width:60,align:'center',editable:true, edittype:'select',editoptions:{value:"Upload:Upload;Comment:Comment;Diary:Diary;Review:Review;Url:Url;Etc:Etc"},editrules:{required:true}},
{name:'sitehit',index:'sitehit',width:30,align:'center',editable:true},
{name:'grpid',index:'grpid',width:50,align:'left',editable:true},
],
pager: jQuery('#htmlPager'),
loadtext: 'Loading Data...',
height: 350,
width: 1000,
rowNum:40,
rowList:[10,15,20,30,50],
sortname: 'sno',
sortorder: "asc",
viewrecords: true,
multiselect: true,
onSelectRow: function(id){
if(id && id!==lastsel){
jQuery('#htmlTable').saveRow(lastsel,true,null,checksave);
jQuery('#htmlTable').editRow(id,true,pickdates);
lastsel=id;
}
},
cellurl:'/jqgrid/jqgridCRUD.php?act=inlineEdit',
editurl:'/jqgrid/jqgridCRUD.php',
caption: 'Viral Marketing Seeding List - inline Editing',
}).navGrid('#htmlPager',{edit:false,add:true,del:true,search:true})
.navButtonAdd("#htmlPager",{ caption:'', buttonimg:'/image/excel.png', onClickButton:function(){ document.down.submit();},title:'Excel 다운로드'})
;
});/* end of on ready event */
function pickdates(id){ jQuery("#"+id+"_sdate","#htmlTable").datepicker({dateFormat:"yymmdd"}); }
function checksave(result)
{
if(result.responseText!='') alert(result.responseText);
else $("#htmlTable").trigger("reloadGrid");
}
</script>
</body>
</html>
반응형
'오픈소스SW' 카테고리의 다른 글
| php 문자열처리 관련 function (0) | 2010.06.05 |
|---|---|
| JavaScript Tree Menu (0) | 2010.05.24 |
| fckeditor에서 이미지경로를 위한 Tip (0) | 2010.05.13 |
| PHP 게시판 (0) | 2010.05.12 |
| Automating Linux Unix (0) | 2009.08.11 |