자바블로그

javascript에서 event관련 작업을 진행 할때 원치 않는 추가 이벤트가 생기지 않게 해주는 메소드 입니다.

stopPropagation 은 a태그에 onclick이벤트가 발생될때 만약 해당 a태그가 ul > li > a 순으로 되어 있다면

위치상 li, ul에도 동일한 onclick이벤트가 발생되게 되는데 event.stopPropagation() 를 통해서 부모 태그로 연려되는 

이벤트를 막 을수 있습니다.

preventDefault 은 a태그에 onclick='' href='#' 으로 이벤트를 구성하는 경우 href='#'으로 인해서 스크롤 페이지에서 

상단 페이지로 자동 스크롤 되는 현상이 생기게 되는데(지금은 이런식의 코딩은 안하겠지만 예시로 작성 합니다.)

이때 preventDefault 을 호출하면 onclick이외의 다른 이벤트를 중지하게 됩니다.

(파일업로드 drag and drop 하다 오랜만에 해당 메소드를 보게 되서 지금이라도 정리 합니다.)

jsGird 사용시 loadData로 데이터를 가지고 올때 아래의 error가 발생하는 경우

Cannot read property 'length' of undefined TypeError: Cannot read property 'length' of undefined

jsGrid 옵션 중 pageLoading: true 옵션을 사용하는 경우 

loadData 부분에 페이지 처리를 위한 정보를 같이 넘겨 줘야 합니다.

.done(function(response) {
d.resolve({data: response.aaData, itemsCount: response.total});
});

http://js-grid.com/demos/

http://js-grid.com/docs/

'dataResult depends on pageLoading. When pageLoading is false (by default), then data result is a plain javascript array of objects. If pageLoading is true data result should have following structure' 이부분 내용을 참고 하면 됩니다.

jsGrid사용시 문구를 한글로 변경 하기 위한 파일 입니다.

아래의 js파일을 서비스 페이지에 추가 해주시면 됩니다.(locales관련 설정 및 호출을 하나의 파일에 추가 했습니다.)

http://js-grid.com/docs/

경로의 내용을 보면 원하는 언어 관련 js파일을 추가 후 jsGrid.locale("ko"); 로 언어 설정을 변경 해주면 됩니다.

https://github.com/tabalinas/jsgrid/tree/master/src/i18n 페이지 경로 보시면 여러 언어를 다운로드 받아서 사용 할 수 있습니다. 자신만의 언어 설정을 원하는 경우 

jsGrid.locales.my_lang = {
    // localization config goes here
    ...
};

부분을 참고 하셔서 추가 해주시면 됩니다.

var datatable = $('#dataTables').DataTable({
	pageLength: 10,
	bPaginate: true,
	bLengthChange: true,
	lengthMenu : [ [ 5, 10, 20, 30, -1 ], [ 5, 10, 20, 30, "전체" ] ],
	bAutoWidth: false,
	processing: true,
	serverSide: false,
	searching: true,
	ajax : {
		"url":"",
		"type":"POST"
	},
	columns : [
		{data: "seq"},
		{data: "data1"},
		{data: "data2"}
	],
	columnDefs: [
	  {targets: 0, className: 'dt-body-center'}
	 ,{targets: 1, width: "75%", className: 'selectTd'}
	 ,{targets: 2, className: 'dt-body-center hidden-xs'}
	 ],
	order:[[ 0,"desc"]],
	language : lang_kor
});

$('#dataTables tbody').on('click', 'tr', function () {
	var data = datatable.row( this ).data();
	data.seq;
} );

datatable.ajax.url('').load();
//datatable.search("");

//일정 시간 이후에(데이터 출력 후) 항목 넒이를 다시 그리게 셋팅
setTimeout(function(){datatable.columns.adjust().draw();},200);

//전체 체크박스 관련 동작(page: 'current' 옵션으로 현재 페이지만 처리)
$('#selectAll').on('click', function(){
	var rows = datatable.rows({ page: 'current'}).nodes();
	$('input:checkbox[name="seqs"]', rows).prop('checked', this.checked);
});

columnDefs: [{
	targets: 0,
	searchable: false,
	orderable: false,
	className: 'dt-body-center',
	render: function (data, type, full, meta){
		return '';
	}
 }
 ,{targets: 2, className: 'dt-body-center'}
 ,{targets: 3, className: 'dt-body-center'}
 ,{targets: 4, className: 'dt-body-center hidden-xs'}
 ,{targets: 5, className: 'dt-body-center hidden-xs'}
 ,{targets: 6, className: 'dt-body-center hidden-xs'}
 ,{
	targets: 7,
	searchable: false,
	orderable: false,
	className: 'dt-body-center dt-body-button',
	render: function (data, type, full, meta){
		var buttonHtml = "
";
		buttonHtml = buttonHtml+"수정";
		buttonHtml = buttonHtml+"삭제";
		buttonHtml = buttonHtml+"
";
		return buttonHtml;
	}
 }
 ]

coulumns:[
	{text:'no1', dataField:'data1', width:'10%', cellsAlign:'center', align:'center', columnGroup:'groups1'},
	{text:'no2', dataField:'data2', width:'10%', cellsAlign:'center', align:'center', columnGroup:'groups1'},
	{text:'no3', dataField:'data3', width:'10%', cellsAlign:'center', align:'center', columnGroup:'groups1'},
	{text:'no4', dataField:'data4', width:'10%', cellsAlign:'center', align:'center', columnGroup:'groups1'},
	{text:'no5', dataField:'data5', width:'10%', cellsAlign:'center', align:'center', columnGroup:'groups2'},
	{text:'no6', dataField:'data6', width:'10%', cellsAlign:'center', align:'center', columnGroup:'groups2'},
	{text:'no7', dataField:'data7', width:'10%', cellsAlign:'center', align:'center', columnGroup:'groups2'},
	{text:'no8', dataField:'data8', width:'10%', cellsAlign:'center', align:'center', columnGroup:'groups2'},
	{text:'no9', dataField:'data9', width:'10%', cellsAlign:'center', align:'center', columnGroup:'groups3'},
	{text:'no10', dataField:'data10', width:'10%', cellsAlign:'center', align:'center', columnGroup:'groups3'},
	{text:'no11', dataField:'data11', width:'10%', cellsAlign:'center', align:'center', columnGroup:'groups3'},
	{text:'no12', dataField:'data12', width:'10%', cellsAlign:'center', align:'center', columnGroup:'groups3'}
],
columnGroups:[
	{text:'그룹1', align:'center', name:'groups1'},
	{text:'그룹2', align:'center', name:'groups2'},
	{text:'그룹3', align:'center', name:'groups3'},
]

Treeview에 특정 attr을 추가하고 해당 정보를 가지고 오는 방법

Bootstrap-treeview.js 파일의 520라인 쯤

Var treeItem = $(_this.template.item)

.addClass...

.attr(‘data-nodeid’, node.nodeId)

.attr(‘style’,_this.buildStyleOverride(node));

하단에 if문으로 데이터를 확인하고 attr을 추가하는 소스를 작성

Ex> if(node.seq){treeItem.attr(‘data-seq’,node.seq);}

이때 seq 는 json에 해당하는 key가 있어야 사용 가능

spring으로 개발 진행시 ajax 응답 json 데이터의 한글이 깨지는 경우 (??? 식으로)

1. Controller return 타입이 @ResponseBody 인 경우 

=> @RequestMapping(value="...",method=RequestMethod.POST,produces = "application/text; charset=utf8")

같이 RequestMapping 에 utf8 추가

2. null or ModelAndView 로 설정 후 null return하고 PrintWriter 사용하는 경우 

=> response.setCharacterEncoding("UTF-8");

같이 응답 객체에 인코딩 설정 추가

3. jsonview 사용시 깨지는 경우

=> web.xml 의 filter > encodingFilter 부분에 

<init-param>

<param-name>forceEncoding</param-name>

<param-value>true</param-value>

</init-param>

추가 forceEncoding 이용해서 강제 인코딩 추가

http://nodejs.org/#download

접속 후 윈도우 인스톨 버전을 다운로드 후 설치
cmd 창에서 node 실행

ex>
C:> node
>

라는 화면이 출력 정상적으로 출력 되지 않으면 컴퓨터를 재시작 해서 다시 시도 해봅니다.

1. 콘솔에서 데이터 출력 테스트
ex>
C:> node
> console.log('hello world');
hello world

2. 파일로 데이터 출력 테스트
test.js 파일을 생성하고 해당 페이지에

console.log('hello world');
를 입력 후 저장 파일이 저장된 폴더로 이동 후
ex>
C:\nodejs> node test.js
hello world

3. 웹페이지에 데이터 출력 테스트

test.js파일의 내용을 아래와 같이 수정
/////////////////////////////////////////////
var http = require('http');

http.createServer(function(req,res){

 res.writeHead(200,{'Content-Type':'text/plain'});

 res.end('Hello World\n');

}).listen(80,"127.0.0.1");

console.log("test url http://127.0.0.1/");
/////////////////////////////////////////////

ex>
C:\nodejs> node test.js
test url http://127.0.0.1/

웹페이지에서 url을 호출 하면 프로그램이 데이터 출력 확인이 가능 합니다.

jqGrid로 작업 할때 간혹 데이터를 jqxDataTable로 출력 하는 경우 onCellSelect옵션이 없어서 선택 관련

이벤트를 처리 하기 위해 아래와 같이 스크립트 작업을 해야 하는 경우가 있습니다.

$("#jqGrid").on('rowClick',function(){

 var args = evnet.args;

 var rowData = args.row;

 var dataField = args.dataField;

 var columnData = rowData.데이터를가지고올컬럼아이디;

/*

var args = event.args;

var row = args.row;

var index = args.index;

var boundIndex = args.boundIndex; 

var key = args.key;

var dataField = args.dataField;

var clickEvent = args.originalEvent;

*/

});

dataField 값으로 if문을 통해서 이벤트를 처리 할 수 있습니다. 

jquery를 이용해서 배열을 처리 할때 index를 기준으로 처리 해야 하는경우

이벤트 발생 시점에

$("객체명").index(this); 을 통해서 해당 이벤트가 발생된 객체의 index를 가지고 오고 

같은 배열 형식의 $("찾으려는객체명:eq("+$("객체명").index(this)+")") 와 같이 데이터를 배열 index를 이용해서 찾아 갈 수 있습니다.