EasyUI 의 DataGrid 줄 마다 조작 버튼 의 구현 코드 를 추가 합 니 다.

1741 단어 datagrid버튼
오늘 프로젝트 를 할 때 easyui 의 datagrid 모든 열 데이터 뒤에 조작 단 추 를 추가 하려 고 했 습 니 다.처음에 배경 에서 문자열 을 JSON 으로 전송 하려 고 했 지만 테스트 를 한 후에 이 방법 이 효과 가 없다 는 것 을 알 게 되 었 습 니 다.인터넷 에서 검색 한 결과 다음 과 같이 정리 되 었 습 니 다.
사용자 정의 열 을 추가 하 는 것 은 간단 합 니 다.js 가 datagrid 를 설명 할 때 다음 과 같은 코드 를 추가 합 니 다.

{field:'operate',title:'  ',align:'center',width:$(this).width()*0.1, 
  formatter:function(value, row, index){ 
    var str = '<a href="#" rel="external nofollow" name="opera" class="easyui-linkbutton" ></a>'; 
    return str; 
}} 
이 줄 코드 는 columns 속성 에서 정 의 된 것 이 며,반드시 이 코드 를 추가 해 야 합 니 다.

onLoadSuccess:function(data){  
    $("a[name='opera']").linkbutton({text:'   ',plain:true,iconCls:'icon-add'});  
}, 
이것 을 추가 하지 않 으 면 그 작업 열 에 단추 스타일 이 나타 나 지 않 습 니 다.하이퍼링크 일 뿐 링크 button 이나 다른 단추 로 필요 에 따라 개편 할 수 있 습 니 다.
마지막 효 과 는 다음 과 같다.

그 다음 에 a 태그 에 대해 onclick 이벤트 같은 것 을 할 수 있 습 니 다.상황 에 따라 결정 할 수 있 습 니 다.
총결산
위 에서 말씀 드 린 것 은 편집장 님 께 서 소개 해 주신 EasyUI 의 DataGrid 각 줄 데이터 에 조작 버튼 을 추가 하 는 실현 코드 입 니 다.여러분 께 도움 이 되 시 기 를 바 랍 니 다.궁금 한 점 이 있 으 시 면 메 시 지 를 남 겨 주세요.편집장 님 께 서 바로 답 해 드 리 겠 습 니 다.여기 서도 저희 사이트 에 대한 여러분 의 지지 에 감 사 드 립 니 다!

좋은 웹페이지 즐겨찾기