각도별 편집 가능한 데이터 그리드JS

각도별 편집 가능한 데이터 그리드JS

Angular가 있습니까?인라인 편집을 제공하는 DataGrid의 JS 모듈검도에 하나 있다UI http://demos.kendoui.com/web/grid/editing-inline.html

캔 각도JS&KendoUI를 함께 사용하시겠습니까?

ui-grid 체크 아웃

템플릿 작성, 가상화, 선택 항목, 그룹화 등을 위한 단순한 데이터 바인딩...

이 매우 일반적인 예를 보십시오. i는 먼저 행을 루프하고 다음으로 열을 루프합니다.다음으로 스팬과 입력 필드 간의 간단한 변경입니다.http://jsfiddle.net/3BVMm/3/

이를 통해 코드 몇 줄을 사용하여 인라인 편집을 수행할 수 있습니다.

버그가 있는 것 같아서 예상대로 동작하지 않습니다.이미 앵글에 올렸습니다.

스마트 테이블을 사용할 수도 있습니다.

예: 밸런스 열의 항목을 두 번 클릭합니다.http://plnkr.co/edit/QQQd2znPqh87X2oQONd9?p=preview

  label: 'Balance',
  map: 'balance',
  isEditable: true,
  type: 'number',

홈 페이지의 셀 편집 섹션 아래에 인라인 편집 예가 있습니다.셀 편집 모드는 더블 클릭으로 시작됩니다.

Github : lorenzofox3 / 스마트 테이블

페이지 매기기, 정렬, 필터링, 데이터 포맷, 행 선택 등의 기능을 갖추고 있으며 스타일링/커스터마이즈가 용이한 심플한 테이블 구조도 생성합니다.

각도 조절도 가능합니다.
테이블의 경우 다음과 같은 기능이 있습니다.

• 편집 가능한 행
• 편집 가능 열
• 편집 가능한 전체 그리드

검도는 Angular를 연습하고 있다.JS http://kendo-labs.github.io/angular-kendo/

그리드 각도 그리드는 인라인 편집을 수행할 수 있습니다.각도입니다.JS 디렉티브는 Angular 앱에 접속합니다.다른 표준 그리드 기능(선택, 필터링 등)도 함께 제공됩니다.

편집할 문서 페이지는 여기에 있습니다.

편집을 수행하려면 열 정의에서 편집 가능을 true로 설정합니다.

colDef.editable = true;

기본적으로 그리드는 문자열 값으로 관리됩니다.셀을 정수로 변환하거나 검증을 수행하는 등 셀의 커스텀 처리를 수행할 경우 열 정의(예:

colDef.newValueHAndler = function(params) {
    var valueAsNumber = parseInt(params.newValue);
    if (isNaN(valueAsNumber)) {
        window.alert("Invalid value " + params.newValue + ", must be a number");
    } else {
        params.data.number = valueAsNumber;
    }
}

ng-table 디렉티브 allow를 사용하여 테이블을 활성화 할 수 있습니다.정렬, 필터링 및 페이지 매김을 지원합니다.제목과 필터가 포함된 헤더 행은 컴파일 중에 자동으로 생성됩니다.

For example

편집 가능한 데모

Angular의 풍부함으로 나만의 것을 만들 수 있습니다.서드파티 플러그인을 찾을 필요가 없을 수도 있습니다.

다음을 지원하는 기본 샘플을 만들었습니다.

1. 바인드된 데이터의 인라인 편집.
2. 마지막 그리드 셀을 누를 때 새 행을 추가합니다.

https://plnkr.co/edit/J0PeIlLsaASer4k8owdj?p=preview

단순 css 적용

.TextBoxAsLabel
{
   border: none;
   background-color: #fff;
   background: transparent;
    width:100%;
}

//for Dropdown    
.selectable::-ms-expand {   
  display: none; 
}
.selectable{
    -webkit-appearance: none;
    appearance: none;
}

효과가 있길 바라며, 문제가 있으면 알려 주세요.

최근 오픈 소스 앵글 그리드는 ux-angularjs-datagrid입니다.해 본 적은 없지만 데모는 유망해 보입니다.

https://github.com/webux/ux-angularjs-datagrid

언급URL : https://stackoverflow.com/questions/12016566/editable-datagrid-in-angularjs