ホームページ > php教程 > PHP开发 > Easyui Treegridのデフォルトアイコンを変更する方法

Easyui Treegridのデフォルトアイコンを変更する方法

高洛峰
リリース: 2016-12-29 13:39:41
オリジナル
1772 人が閲覧しました

通常、ツリーグリッドのアイコンは、以下に示すように、デフォルトのフォルダーとファイルの形式になっています:

Easyui Treegrid改变默认图标的方法

json テキストに iconCls を追加して、デフォルトのアイコンを変更できます。たとえば、次の例のようになります:

1

2

3

4

5

6

7

8

9

10

11

{"total":7,"rows":[

{"id":1,"name":"All Tasks","begin":"3/4/2010","end":"3/20/2010","progress":60,"iconCls":"icon-ok"},

{"id":2,"name":"Designing","begin":"3/4/2010","end":"3/10/2010","progress":100,"_parentId":1,"state":"closed"},

{"id":21,"name":"Database","persons":2,"begin":"3/4/2010","end":"3/6/2010","progress":100,"_parentId":2},

{"id":22,"name":"UML","persons":1,"begin":"3/7/2010","end":"3/8/2010","progress":100,"_parentId":2},

{"id":23,"name":"Export Document","persons":1,"begin":"3/9/2010","end":"3/10/2010","progress":100,"_parentId":2},

{"id":3,"name":"Coding","persons":2,"begin":"3/11/2010","end":"3/18/2010","progress":80},

{"id":4,"name":"Testing","persons":1,"begin":"3/19/2010","end":"3/20/2010","progress":20}

],"footer":[

{"name":"Total Persons:","persons":7,"iconCls":"icon-sum"}

]}

ログイン後にコピー

次に、icon.cssを変更し、使用するアイコンを指定したフォルダーに配置します。

通常、このような変更を加えた後、treegrid はデザインしたアイコンを表示できます。

Easyui Treegrid改变默认图标的方法

この時点で設定したアイコンが表示できない場合は、ページ上で icon.css と easyui.css が導入されている順序を確認して、easyui.css が最初であり、icon.css が最後であることを確認してください。 。そうしないと、easyui.css のスタイルが icon.css を上書きし、デフォルトのアイコンが表示されたままになります。

以下では、jQuery EasyUI Treegridの追加、削除、変更、およびチェックコードを紹介します

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

<script type="text/javascript">

function formatProgress(value){

if (value){

var s = &#39;<div style="width:100%;border:1px solid #ccc">&#39; +

&#39;<div style="width:&#39; + value + &#39;%;background:#cc0000;color:#fff">&#39; + value + &#39;%&#39; + &#39;</div>&#39;

&#39;</div>&#39;;

return s;

} else {

return &#39;&#39;;

}

}

var editingId;

function deleteRow(){

if (editingId != undefined){

$(&#39;#tg&#39;).treegrid(&#39;select&#39;, editingId);

return;

}

var row = $(&#39;#tg&#39;).treegrid(&#39;getSelected&#39;);

if (row){

editingId = row.id

$(&#39;#tg&#39;).treegrid(&#39;remove&#39;, editingId);

$(&#39;#tg&#39;).treegrid(&#39;reloadFooter&#39;);

}

$(".actionbtn").toggleClass("l-btn-disabled");

}

function edit(){

if (editingId != undefined){

$(&#39;#tg&#39;).treegrid(&#39;select&#39;, editingId);

return;

}

var row = $(&#39;#tg&#39;).treegrid(&#39;getSelected&#39;);

if (row){

editingId = row.id

$(&#39;#tg&#39;).treegrid(&#39;beginEdit&#39;, editingId);

}

$(".actionbtn").toggleClass("l-btn-disabled");

}

function insert(){

if (editingId != undefined){

$(&#39;#tg&#39;).treegrid(&#39;select&#39;, editingId);

return;

}

/**/

var rows = $(&#39;#tg&#39;).treegrid(&#39;getChildren&#39;);

editingId = rows.length+1;

var row = null;

var _data = {"id":editingId,"name":"new name","persons":0,"begin":"3/19/2010","end":"3/20/2010","progress":10};

var _parentId = 0;

var row = $(&#39;#tg&#39;).treegrid(&#39;getSelected&#39;);

if (row){

$(&#39;#tg&#39;).treegrid(&#39;expand&#39;,row.id);

_parentId = row.id;

}else{

var root = $(&#39;#tg&#39;).treegrid(&#39;getRoot&#39;);

_parentId = null;

}

$(&#39;#tg&#39;).treegrid(&#39;append&#39;,{

parent: _parentId, // 这里指定父级标识就可以了

data: [_data]

});

$(&#39;#tg&#39;).treegrid(&#39;beginEdit&#39;,_data.id);

$(".actionbtn").toggleClass("l-btn-disabled");

}

function save(){

if (editingId != undefined){

var t = $(&#39;#tg&#39;);

t.treegrid(&#39;endEdit&#39;, editingId);

editingId = undefined;

var persons = 0;

var rows = t.treegrid(&#39;getChildren&#39;);

for(var i=0; i<rows.length; i++){

var p = parseInt(rows[i].persons);

if (!isNaN(p)){

persons += p;

}

}

var frow = t.treegrid(&#39;getFooterRows&#39;)[0];

frow.persons = persons;

t.treegrid(&#39;reloadFooter&#39;);

$(".actionbtn").toggleClass("l-btn-disabled");

}

}

function cancel(){

if (editingId != undefined){

$(&#39;#tg&#39;).treegrid(&#39;cancelEdit&#39;, editingId);

editingId = undefined;

}

$(".actionbtn").toggleClass("l-btn-disabled");

}

</script>

<div style="margin:10px 0;">

<a href="javascript:void(0)" disabled="disabled" class="easyui-linkbutton actionbtn" onclick="save()">Save</a>

<a href="javascript:void(0)" disabled="disabled" class="easyui-linkbutton actionbtn" onclick="cancel()">Cancel</a>

</div>

ログイン後にコピー


Easyui Treegridのデフォルトアイコンを変更する方法に関するその他の記事については、PHP中国語Webサイトに注目してください。


関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のおすすめ
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート