> 웹 프론트엔드 > JS 튜토리얼 > Easyui 란 무엇입니까?

Easyui 란 무엇입니까?

怪我咯
풀어 주다: 2017-06-27 11:35:44
원래의
2290명이 탐색했습니다.

1 개요

1. easyui란?

easyui는 jQuery를 기반으로 한 사용자 인터페이스 플러그인 모음입니다. 즉, easyui에서 사용하는 주요 기술은 jQuery이며, 사용자 인터페이스에 표시되는 플러그인을 제공합니다.

2. Easyui는 HTML 플러그인의 확장이므로 easyui를 사용하여 플러그인을 생성하려면 해당 HTML 플러그인과 결합해야 합니다. 예를 들어 easyui에서 제공하는 verifyboxtextboxfilebox dateboxdatatimebox는 필수입니다. 태그에 구현됩니다.

3.data-options

은 플러그인을 인스턴스화하는 데 사용됩니다. 즉, easyui 기본 플러그인에 새로운 기능을 추가하는 데 사용됩니다. 새로운 기능은 data-options 속성에 작성할 수 있습니다. , 속성 값은 작은따옴표로 묶여 있으며 두 속성을 쉼표로 구분합니다. 새로운 기능을 개별적으로 나열할 수도 있습니다.

4. 각 플러그인은 다른 플러그인을 추가하는 컨테이너로 간주할 수 있습니다. 추가 방법은 다음과 같습니다.

툴바 추가 등 해당 속성을 통해 다른 플러그인의 ID를 참조합니다. toolbar="#toolbar" 및 버튼 추가 버튼="#buttons".

5. 플러그인 함수 호출을 위한 구문 형식:

$(selector).插件名("方法名"[参数值]);
로그인 후 복사

6.href reload url

  • href: 정적 로딩, 지정된 페이지 정보 로딩.

  • reload: 지정된 페이지 정보를 로드하기 위해 버튼을 클릭하는 등의 이벤트에 의해 구동되는 동적 로드입니다.

  • url: 서버 리소스를 가리키고 서버에서 데이터를 가져옵니다.

II datagrid 데이터 그리드

1. 기능

데이터 그리드는 주로 Ajax를 통해 데이터베이스에서 얻은 데이터를 표 형식으로 표시하는 데 사용됩니다.

2. 서버에서 반환된 json 문자열 형식:

"rows":[{},{}]",total":int数据
로그인 후 복사

3. 데이터 그리드는 HTML

태그에 구축됩니다.

4. 페이지가 로드된 후 DataGrid는 Ajax를 통해 서버에서 자동으로 데이터를 가져오며 플러그인을 인스턴스화할 때 URL을 제공해야 합니다.

5.datagrid 속성

  • 툴바 추가:toolbar="#toolbar".

  • 행 번호 표시: rownumbers="true".

  • 단일 행 선택만 허용: SingleSelect="true".

  • 열을 테이블 너비에 맞춥니다: fitColumns="true":.

  • 페이지 매김 표시줄 표시: 페이지 매김="true".

6. 열 헤더

<thead>  <tr><th field="在此列显示的数据库字段"width="">列标题</th><th field="在此列显示的数据库字段"width="">列标题</th>  </tr></thead>
로그인 후 복사

7. 선택한 행 가져오기

var row=$(selector).datagrid("getSelected")
로그인 후 복사

행은 ID, 데이터 형식을 포함한 모든 데이터를 포함하여 선택한 행을 나타냅니다. 으으으으

8. 수정 후 양식의 데이터를 다시 로드해야 합니다.

{name01:"value01",name02:"value02"}
로그인 후 복사

Three form

1. form("clear"): 양식을 지웁니다.

2. 데이터 로드

$(selector).datagrid("reload");
로그인 후 복사

3. 양식 제출

$(selector).form("load",{name:"myName"});//加载自定义数据
$(selector).form("load",row);//加载datagrid选中行数据
로그인 후 복사

Ajax 반환 데이터를 처리할 필요가 없는 경우 제출은 다음과 같이 축약될 수 있습니다.

$(selector).form('submit',{
                           url:xxx,
                           onSubmit:function(){
                                    return $(this).form("validate");//验证,只要在前台验证通过后才提交
                                               },
                           success:function(){}//处理返回结果
})
로그인 후 복사
4. easyui를 사용하세요. 양식을 제출한 후 양식이 자동으로 이동하지 않습니다. 점프해야 하는 경우
window.location.href=""와 같이 콜백 함수에 점프 리소스를 설정해야 합니다.

위 내용은 Easyui 란 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿