Grid, jqGrid
jqGrid 최신버전이 업데이트되어서 새롭게 작성한 소스코드
환경 : 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>

저작자표시

'오픈소스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

+ Recent posts

티스토리툴바