2017-12-27 12 views
0

무료 jqgrid (최신 버전)를 사용 중입니다.스타일을 jqgrid에 적용하기

데모에서 본 것은 그리드가 푸른 색이었습니다.

내 응용 프로그램에서 이것을 사용했는데 무엇이 누락 되었는가 확실하지 않지만 그리드가 회색으로 표시됩니다. 나는 또한 guiStyle : "bootstrap"을 적용했지만 외관과 글꼴은 조금 변경하지만 색상은 변경하지 않습니다. 또한 검색 대화 상자에서 컨트롤이 서로 같이 정렬되어 있습니다. 아래의 이미지 링크를 모두 참조하십시오.

  1. https://imgur.com/a/kzCJ3

    어떻게 블루 기본값으로 색상을 변경할 수 있습니다 내가 검색 대화 상자 컨트롤을 해결할 수있는 방법
  2. 나는이 모든 다른 사용자 정의 스타일 서식을 적용 할 수있는 방법을
  3. .

감사

--------------

<link href="/lib/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" /> (bootstrap 4.0.0) 
<link href="~/lib/free-jqgrid/css/ui.jqgrid.css" rel="stylesheet" /> (4.15.2) 
<link href="~/lib/jquery-ui/themes/base/jquery-ui.min.css" rel="stylesheet" /> 
<link href="~/lib/font-awesome/css/font-awesome.min.css" rel="stylesheet" /> 
<link href="~/lib/select2/dist/css/select2.min.css" rel="stylesheet" /> 

@section scripts{ 
<script src="~/lib/jquery/dist/jquery.min.js"></script> 
<script src="~/lib/free-jqgrid/dist/modules/grid.base.js"></script> 
<script src="~/lib/free-jqgrid/dist/modules/grid.common.js"></script> 
<script src="~/lib/free-jqgrid/dist/modules/grid.formedit.js"></script> 
<script src="~/lib/free-jqgrid/dist/modules/grid.filter.js"></script> 
<script src="~/lib/jquery-ui/jquery-ui.min.js"></script> 
<script src="~/lib/select2/dist/js/select2.min.js"></script> 
<script src="~/lib/free-jqgrid/js/i18n/grid.locale-en.js"></script> 
<script src="~/lib/free-jqgrid/js/jquery.jqgrid.min.js"></script> 
------------------ 업데이트 내가 적용하고 있지 않다

/CSS/JS 상기 이외 등의 다른 스타일을 사용하는 것은 아래에 추가 한 :

guiStyle: "bootstrap", 
    iconSet: "fontAwesome", 
+0

포함 된 CSS 및 JavaScript 파일과 사용하는 옵션을 보여주는 데모 (또는 데모)를 제공해주십시오. 부트 스트랩 CSS (부트 스트랩 3 또는 부트 스트랩 4), jQuery UI CSS 또는 둘 다를 사용합니까? 기본 부트 스랩 CSS를 사용하면 대부분의 색상이 회색입니다. 그리드의 거의 모든 요소에 대한 색상이나 배경색을 쉽게 변경할 수 있지만 필요한 항목을 정확하게 지정해야합니다. "어떻게 색을 기본 파란색으로 바꿀 수 있습니까?"와 같은 문구는 그리드의 정확한 요소 (데이터, 열 머리글, 호출기 등)를 지정하지 않아 거의 정보를 제공하지 않습니다. – Oleg

+0

가 업데이트되었습니다. – aman

답변

1

좀 더 정확히 (데모와 함께) 일을 지정하도록 권장하고 당신이 원하는 것 있다.

귀하의 질문에 대답하기 전에 나는 에 대해 guiStyle: "bootstrap"을 사용할 필요가 없다고 말하고 싶습니다.

부트 스트랩 4 및 부트 스트랩 3의 CSS 설정이 다릅니다. 부트 스트랩 4와 함께 무료 jqGrid를 사용하는 경우 guiStyle: "bootstrap" 대신 guiStyle: "bootstrap4"을 사용해야합니다. 예를 들어 https://jsfiddle.net/ovq05x0c/1/을 참조하십시오.

당신은 jquery.jqgrid.min.js은 다음 grid.base.js, grid.common.js, grid.formedit.js, grid.filter.js을 포함해야하고 당신이 그것을 jquery.jqgrid.min.js 또는 grid.base.js의 일부이기 때문에 i18n/grid.locale-en.js을 포함 할 필요가 어떤 방식으로하지 않습니다 포함합니다. 파일 query-ui.min.js은 jQuery UI를 직접 사용하지 않는 경우에는 필요하지 않습니다.

모든 CSS 및 JavaScript 파일을 로컬 서버에서로드하는 대신 CDN에서로드하는 것이 가장 좋습니다. 로컬 서버는 로컬 응용 프로그램에만 좋을 수 있지만 인터넷에서 사용할 수있는 것은 아닙니다. CDN에서 무료 jqGrid 사용에 대한 자세한 내용은 the article을 참조하십시오.

자유로운 jqGrid 사용의 시작점으로 the article을 읽는 것이 좋습니다. 그리드 사용자 정의의 몇 가지 예를 제공합니다. 예를 들어, CSS 규칙

.ui-jqgrid.ui-jqgrid-bootstrap { 
    border: 1px solid #003380; 
} 

는 그리드의 외부 DIV, CSS 규칙

.ui-jqgrid.ui-jqgrid-bootstrap .ui-jqgrid-caption { 
    background-color: #e6f0ff; 
} 

캡션/제목의 배경색을 변경의 테두리의 색상을 변경합니다.CSS 규칙 하나 더

.ui-jqgrid.ui-jqgrid-bootstrap .ui-jqgrid-hdiv { 
    background-color: #cce0ff; 
} 

열 머리글의 배경색이 변경됩니다. 같은 방법으로 jqGrid의 다른 요소를 사용자 정의 할 수 있습니다. 데모 https://jsfiddle.net/OlegKi/90qmjean/7/은 무료 색상 jqGrid 및 select2에서 일부 색상 및 글꼴 크기를 변경하는 예입니다.

+0

Thanks Oleg. 나는 당신의 제안에 따라 변경했고 스타일을 바꾸는 일을 할 것이다. 여기에는 한 가지만 있습니다. 이전에 guiStyle : "bootstrap"을 사용하고 guiStyle로 변경 한 후 : "bootstrap4"행을 선택할 때마다 선택한 행 색상이 변경되지 않습니다. "부트 스트랩"으로 다시 변경하면 선택한 행 색상이 변경된 것을 볼 수 있습니다. 나는 또한 .ui-jqgrid-btable .ui-state-highlight { 배경을 추가하려고 시도 : 노란색; } 귀하의 게시물 중 하나에 따라하지만 그 또한 효과가 없습니다. – aman

+0

@aman : 문제 또는 버그를 신고 할 경우 * 항상 * 데모를 제공하십시오. 내 대답에는'guiStyle : "bootstrap4"'와 Bootstrap 4.0.0-beta.2 및 무료 jqGrid 4.15.2를 사용하는 https://jsfiddle.net/ovq05x0c/1/ 데모가 포함되어 있습니다. 데모에서 행을 선택하는 데 아무런 문제가 없습니다. – Oleg

+0

죄송합니다. 끝까지 문제가있었습니다. 내 부트 스트랩을 4로 업데이트했지만 여전히 3을 참조하고있었습니다. 캐시를 삭제하고 브라우저를 다시 시작해야했습니다. 또한 내 프로젝트에서 사이드와 톱 메뉴의 스타일을 지정하기 위해 대시 - 라이트 CSS를 사용하고 있다고 생각합니다. 부트 스트랩을 4로 사용하면 엉망이됩니다. 하지만 부트 스트랩 3으로 잘 돌아가서 업데이트됩니다. 이제는 부트 스트랩 3에서 그리드가 잘 작동하지만 guiStyle : "bootstrap"대신 guiStyle : "bootstrap3"을 써야합니다. 부트 스트랩 3을 다시 작성하면 페이지가 엉망입니다. – aman