민들레 데이터 테이블 사용자 정의 jqueryUI 테마

StackOverflow https://stackoverflow.com//questions/24032270

문제

최근에 통합했어요 데이터 테이블 나와 함께 spring 4 mvc + Hibernate 4 + Tiles 3 프로젝트.

모든 것이 잘 작동합니다.하지만 한 가지 문제가 있습니다.나의 jqueryUI themes 제대로 작동하지 않습니다.

아래 이미지를 살펴보시기 바랍니다.
1. Search filter 그리고 export links 한 줄에 있지 않습니다.한 줄로 나타나기를 원합니다.

나는 시도했다 dom="ilfrtip" 내보내기 링크가 사라졌습니다!!또한 내가 원하는 결과를 얻지 못했습니다...!

enter image description here

  1. 그리고 datatable sorted column 나타납니다 파란색 모든 테마에서 !!

enter image description here

  1. 또한 표시된 대로 마우스를 올리면 행을 강조표시하고 싶습니다. 여기, 하지만 나와 함께 맞춤 색상 파란색이 아닙니다.

  2. 나도 그림처럼 줄무늬를 원해 여기, 하지만 내 맞춤 색상을 사용합니다.

나는 사용했다 cssStripes="odd,even", 하지만 작동하지 않습니다.:(

그래서 기본 테마가 아닌 커스텀 테마를 적용하고 싶습니다. 테마 옵션 테마.

내 맞춤 테마를 다음에서 다운로드했습니다. 테마롤러 이름 PurpleTheme.

이것을 어떻게 적용할 수 있나요? datatables?

스프링을 사용하여 스프링 테마 속성에서 테마를 로드하고 있습니다. themeresolver 그리고 themeinterceptor.

<spring:theme code="theme" var="springTheme" />
<datatables:table id="users" data="${list}" 
row="user" rowIdBase="userId" rowIdPrefix="user_"  
displayLength="5" lengthMenu="5,10,15,25,50,100"
jqueryUI="true" theme="jqueryui" themeOption="${springTheme}" 
filterable="true" 
processing="true" autoWidth="true" 
pageable="true" paginationType="full_numbers" 
export="csv,xml,pdf,xls,xlsx" stateSave="true" deferRender="true"   >

어떤 도움이라도 초대됩니다.미리 감사드립니다.....

도움이 되었습니까?

해결책

방금 테마를 다운로드하여 테스트를 해봤습니다. 테마롤러.다음은 Dandelion & Dandelion-Datatables v0.10.0을 사용하여 사용자 정의 테마를 적용하는 데 필요한 단계를 따릅니다.

1/ jQueryUI 관련 자산을 다운로드하고 설치합니다.

ThemeRoller에서 모든 에셋을 다운로드한 후 프로젝트 안에 배치하세요.내 예에서는 다음과 같은 표준 Maven 아키텍처를 사용합니다.

src
|__ main
   |__ webapp
      |__ assets
         |__ css
            |__ jquery-ui-1.10.4.custom.css
         |__ images
            |__ ui-bg_*****.png
            |__ ui-icons_****.png

경고: 내 페이지를 가리키도록 CSS 파일의 모든 이미지 링크를 업데이트해야 했습니다. images 폴더 (../images/ 대신에 images/).

2/ 새로운 자산 번들 준비

모든 자산이 여기에 있으면 새 자산을 만듭니다. 묶음 ~라고 불리는 custom-theme.json 에서 src/main/resources/dandelion 폴더.

이 파일에서는 사용자 정의 CSS를 참조하기만 하면 됩니다.이 번들을 다음에 종속된 것으로 표시하는 것을 잊지 마십시오. jqueryui 하나(사용할 때 이미 활성화되어 있음) theme="jqueryui" 테이블 속성).

{
    "bundle" : "custom-theme",
    "dependencies": [ "jqueryui" ],
    "assets": [{
        "name": "jquery-ui-custom",
        "version": "0.10.0",
        "type": "css",
        "locations": {
            "webapp": "/assets/css/jquery-ui-1.10.4.custom.css"
        }
    }]
}

3/ Dandelion-Datatables용 확장 프로그램 만들기

현재 사용자 정의 테마 옵션을 사용하는 유일한 방법은 jqueryui 테마는 확장 프로그램을 만드는 것입니다.

구성(JSP 측)을 완화하려면 jQueryUI와 사용자 정의 테마를 모두 활성화하는 확장(실제로는 테마)을 생성하여 사용할 필요가 없도록 하는 것이 좋습니다. theme="jqueryui" 더 이상.

3.1/ 확장하는 클래스 만들기 AbstractExtension

package com.example;

public class CustomJqueryTheme extends AbstractExtension {

    @Override
    public String getName() {
        return "myTheme";
    }

    @Override
    public void setup(HtmlTable table) {

        // Activate bundles
        AssetRequestContext
            .get(table.getTableConfiguration().getRequest())
                .addBundle("ddl-dt-theme-jqueryui")
                .addBundle("custom-theme");

        // Add "bJQueryUI":true
        addParameter(DTConstants.DT_JQUERYUI, true);

        // Add class="display"
        table.addCssClass("display");
    }
}

3.2/ 확장 프로그램 등록

그런 다음 Dandelion-Datatables에서 확장 프로그램을 감지해야 합니다.그렇게 하려면 다음을 정의해야 합니다. [group].main.extension.package 구성 파일의 속성입니다.이 속성은 실제로 Dandelion-Datatables가 확장을 검색하는 패키지입니다.

그래서 새로 추가했어요 datatables.properties 아래 파일 src/main/resources/dandelion/datatables/ 폴더에는 다음이 포함됩니다.

global.main.extension.package=com.example

4/ 확장 프로그램 활성화

지면이 준비되면 다음 기능을 통해 확장 기능을 활성화하여 테스트할 수 있습니다. ext 테이블 속성.

<datatables:table ... ext="myTheme" ...>
    ...
</datatables:table>

위에서 지정한 이름을 getName() 확장 방법.

5/ 구성 조정

내보내기 링크 없이도 잘 작동합니다.그러나 내보내기 기능을 활성화하자마자 Dandelion-Datatables는 sDom 매개변수를 새 문자로 업데이트합니다. E (내보내기용) 따라서 이전에 jQuery 테마로 설정한 구성이 중단됩니다.

따라서 다음과 같이 이 설정을 재정의하면 됩니다.

<datatables:table ... ext="myTheme" export="csv" dom="<\"H\"lEfr>t<\"F\"ip>">
    ...
</datatables:table>

또 다른 옵션은 위의 sDom 매개변수를 직접 구성하는 것입니다. CustomJqueryTheme 자바 클래스.

마지막으로 홀수/짝수 행을 업데이트하려면 다음과 같이 cssStripes 테이블 속성을 사용하면 됩니다.

<datatables:table ... cssStripes="css-class-for-odd,css-class-for-even">
    ...
</datatables:table>

다음 사항을 확인하세요.

  • "홀수" 및 "짝수"가 아닌 다른 것을 사용하려는 경우(데이터 테이블이 이러한 클래스를 사용하기 때문)
  • 또는 여전히 "홀수"와 "짝수"를 사용하려면 사용자 정의 CSS 규칙으로 이를 재정의해야 합니다.

보시다시피 쉽지 않습니다.:-/

하지만 확장 메커니즘의 개선 덕분에 향후 버전에서는 좀 더 단순해질 것입니다.

공식 Dandelion-Datatables 샘플 애플리케이션에서 이 예제를 사용할 수 있게 되면 이 답변을 업데이트할 예정입니다.

(StackOverflow에 필요한 면책조항:저는 민들레의 작가입니다)

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top