,
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
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
  1. 2013.11.15 12:30

    비밀댓글입니다

    # Delete Reply
  2. Favicon of https://openbee.kr BlogIcon 오픈비 chaeya 2013.11.16 02:01 신고

    최근에 관리되지 않는 소스코드인 탓에 금방 답변드리지 못하는 점 양해를 바랍니다. 조만간 틈나는 대로 한번 구동해보고 답변드리도록 하겠습니다.

    # Delete Reply

+ Recent posts