jqGrid 설치에서 디스플레이로
jqGrid 사용
환경은 Eclipse입니다.
1. 다운로드
다음 두 개 다운로드
・jQueryUI(http://jqueryui.com/download/)
- 페이지 끝의 "Theme"섹션에서 "Redmond"를 선택하고 다운로드
・jqGrid(http://www.trirand.com/blog/?page_id=6)
- 직접 다운로드
2. 인코딩
jqGrid.html<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link type="text/css" media="screen" href="jqGrid/jquery-ui.min.css" rel="stylesheet" />
<link type="text/css" media="screen" href="jqGrid/css/ui.jqgrid.css" rel="stylesheet" />
<script type="text/javascript" src="jqGrid/js/jquery-1.11.0.min.js" ></script>
<script type="text/javascript" src="jqGrid/js/jquery.jqGrid.min.js" ></script>
<script type="text/javascript" src="jqGrid/js/i18n/grid.locale-ja.js" ></script>
<script type="text/javascript">
jQuery(document).ready(function()
{
var mydata = [
{comp_code:"CD1", comp_name:"株式会社シー", comp_kana:"カブシキカイシャシー"},
{comp_code:"CD2", comp_name:"ビー株式会社", comp_kana:"ビーカブシキカイシャ"},
{comp_code:"CD3", comp_name:"有限会社エー", comp_kana:"ユウゲンガイシャエー"},
];
jQuery("#list").jqGrid({
data: mydata,
datatype: "local",
colNames:['コード', '会社名', 'カナ'],
colModel:[
{name:'comp_code'},
{name:'comp_name'},
{name:'comp_kana'},
],
multiselect: false,
caption: '会社一覧'
});
});
</script>
</head>
<body>
<table id="list">
</table>
</body>
</html>
↓ 정리는 했지만 다운로드한 두 폴더의 내용을 모두 파내면 된다!
jQuery의 "images"폴더 라이브러리 읽기가 필요하기 때문입니다!
3. 표시
어쨌든 간단하지만 이렇게 하면 jQgrid를 사용한 화면을 만들 수 있습니다!!
인용하다
http://samples.northwind.mydns.jp/home/webdev/jqgridsample1
Reference
이 문제에 관하여(jqGrid 설치에서 디스플레이로), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/k499778/items/65db2380d989b1d70985
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link type="text/css" media="screen" href="jqGrid/jquery-ui.min.css" rel="stylesheet" />
<link type="text/css" media="screen" href="jqGrid/css/ui.jqgrid.css" rel="stylesheet" />
<script type="text/javascript" src="jqGrid/js/jquery-1.11.0.min.js" ></script>
<script type="text/javascript" src="jqGrid/js/jquery.jqGrid.min.js" ></script>
<script type="text/javascript" src="jqGrid/js/i18n/grid.locale-ja.js" ></script>
<script type="text/javascript">
jQuery(document).ready(function()
{
var mydata = [
{comp_code:"CD1", comp_name:"株式会社シー", comp_kana:"カブシキカイシャシー"},
{comp_code:"CD2", comp_name:"ビー株式会社", comp_kana:"ビーカブシキカイシャ"},
{comp_code:"CD3", comp_name:"有限会社エー", comp_kana:"ユウゲンガイシャエー"},
];
jQuery("#list").jqGrid({
data: mydata,
datatype: "local",
colNames:['コード', '会社名', 'カナ'],
colModel:[
{name:'comp_code'},
{name:'comp_name'},
{name:'comp_kana'},
],
multiselect: false,
caption: '会社一覧'
});
});
</script>
</head>
<body>
<table id="list">
</table>
</body>
</html>
Reference
이 문제에 관하여(jqGrid 설치에서 디스플레이로), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/k499778/items/65db2380d989b1d70985텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
