'jqGrid'에 해당되는 글 1건

jqGrid 최신버전이 업데이트되어서 새롭게 작성한 소스코드
환경 : LAMP, UTF-8
기능
- 한글화 적용
- 인라인 에디팅
- 엑셀 다운로드
- 검색
- 다중선택삭제 구현

<!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>

'오픈소스SW' 카테고리의 다른 글

php 문자열처리 관련 function  (0) 2010.06.05
JavaScript Tree Menu  (0) 2010.05.24
jqGrid 3.6.5 PHP CRUD  (2) 2010.05.23
fckeditor에서 이미지경로를 위한 Tip  (0) 2010.05.13
PHP 게시판  (0) 2010.05.12
Automating Linux Unix  (0) 2009.08.11
블로그 이미지

오픈비 chaeya

시간이 지날수록 늘어가는 좋아하는 것들에 대한 삽질 기록. 그리고 작은 목소리.

Tag ,