Category Archives: jQuery

[jsTree] Populating the tree using JSON

Posted on 2015 年 12 月 21 日 by cowman.chiang

Using Json

$('#using_json').jstree({ 'core' : 
{
    'data' : [
        'Simple root node',
        {
            'text' : 'Root node 2',
            'state' : {
                'opened' : true,
                'selected' : true
            },
            'children' : [
                { 'text' : 'Child 1' },
                'Child 2'
            ]
        }
    ]
} });

$('#using_json').jstree({ 'core' :

{

'data' : [

'Simple root node',

{

'text' : 'Root node 2',

'state' : {

'opened' : true,

'selected' : true

'children' : [

{ 'text' : 'Child 1' },

'Child 2'

]

}

]

} });

Using the alternative JSON format

$('#using_json').jstree({ 'core' : {
    'data' : [
        { "id" : "ajson1", "parent" : "#", "text" : "Simple root node" },
        { "id" : "ajson2", "parent" : "#", "text" : "Root node 2" },
        { "id" : "ajson3", "parent" : "ajson2", "text" : "Child 1" },
        { "id" : "ajson4", "parent" : "ajson2", "text" : "Child 2" },
    ]
} });

$('#using_json').jstree({ 'core' : {

'data' : [

{ "id" : "ajson1", "parent" : "#", "text" : "Simple root node" },

{ "id" : "ajson2", "parent" : "#", "text" : "Root node 2" },

{ "id" : "ajson3", "parent" : "ajson2", "text" : "Child 1" },

{ "id" : "ajson4", "parent" : "ajson2", "text" : "Child 2" },

]

} });

Ref. Populating the tree using JSON

Posted in jsTree | Leave a comment

[jsTree] Expand and collapse buttons.

Posted on 2015 年 12 月 21 日 by cowman.chiang

&lt;input type="button" value="Expand All" onclick="$(‘#jsTreeID').jstree('open_all');"&gt;
&lt;input type="button" value="Collapse All" onclick="$('#jsTreeID').jstree('close_all');"&gt;

Ref: jsTree: adding Expand All and Collapse All buttons

Posted in jsTree | Leave a comment

[JavaScript][jQuery] How to enable/disable select field?

Posted on 2015 年 12 月 15 日 by cowman.chiang

[jQuery]

$('input[type=radio][name=ldap-sync-type]').change(function() {
    if (this.value == '0') {
        $("select[name=day-option]").prop("disabled", true);
        $("select[name=clock-option]").prop("disabled", true);
    } else if (this.value == '1') {
        $("select[name=day-option]").prop("disabled", false);
        $("select[name=clock-option]").prop("disabled", false);
    }
});

$('input[type=radio][name=ldap-sync-type]').change(function() {

if (this.value == '0') {

$("select[name=day-option]").prop("disabled", true);

$("select[name=clock-option]").prop("disabled", true);

} else if (this.value == '1') {

$("select[name=day-option]").prop("disabled", false);

$("select[name=clock-option]").prop("disabled", false);

}

});

[JavaScript]

$('input[type=radio][name=ldap-sync-type]').change(function() {
    if (this.value == '0') {
        $("select[name=day-option]").attr("disabled", "disabled");
        $("select[name=clock-option]").attr("disabled", "disabled");
    } else if (this.value == '1') {
        $("select[name=day-option]").removeAttr("disabled");
        $("select[name=clock-option]").removeAttr("disabled");
    }
});

$('input[type=radio][name=ldap-sync-type]').change(function() {

if (this.value == '0') {

$("select[name=day-option]").attr("disabled", "disabled");

$("select[name=clock-option]").attr("disabled", "disabled");

} else if (this.value == '1') {

$("select[name=day-option]").removeAttr("disabled");

$("select[name=clock-option]").removeAttr("disabled");

}

});

Posted in JavaScript, jQuery | Leave a comment

jQuery Tablesorter

Posted on 2014 年 12 月 16 日 by cowman.chiang

<html>
 <head>
  <link rel="stylesheet" href="theme/style.css" type="text/css" id="" media="print, projection, screen" />
  <script type="text/javascript" src="jquery.tablesorter.js"></script>
  <script type="text/javascript">
   $(function() {
    $("table").tablesorter({
     //是否開啟debug模式，在console端顯示
     //debug: true,
     widgets: ['zebra'],
     widthFixed: false,
     headers:{
      //預設情況下，會自動parser每一欄資料的屬性，但是也有可能會變是錯誤導致無法排序
      //第一欄資料屬性強制設為text
      0: { sorter: "text" },
      //關閉第三欄的排序功能
      2: { sorter: false }
     },
     //預設排序方式為第一欄，升冪
     sortList: [[0,0]]
    });
   });
  </script>
 </head>
 <body>
  <div data-role="main" class="ui-content">
  <table id = "tablePads" class = "tablesorter" cellspacing="0" BORDER="0">
   <thead>
    <tr>
     <th style="text-align:center">Pad Name</th>
     <th style="text-align:center">Last Edit Date</th>
     <th style="text-align:center">Active</th>
     </tr>
   </thead>
   <tbody>
    <?php 取資料的迴圈;?>
     <tr id="Pad<%=i%>">
      <td>資料1</td>
      <td>資料2</td>
      <td>資料3</td>
     </tr>
    <?php } ?>
   </tbody>
  </table>
  </div>
 </body>
</html>

<html>

<head>

$(function() {

$("table").tablesorter({

//是否開啟debug模式，在console端顯示

//debug: true,

widgets: ['zebra'],

widthFixed: false,

headers:{

//預設情況下，會自動parser每一欄資料的屬性，但是也有可能會變是錯誤導致無法排序

//第一欄資料屬性強制設為text

0: { sorter: "text" },

//關閉第三欄的排序功能

2: { sorter: false }

//預設排序方式為第一欄，升冪

sortList: [[0,0]]

});

</script>

</head>

<body>

<thead>

<tr>

<th style="text-align:center">Active</th>

</tr>

</thead>

<tbody>

<?php 取資料的迴圈;?>

</tr>

<?php } ?>

</tbody>

</table>

</div>

</body>

</html>

Posted in jQuery | Leave a comment

Category Archives: jQuery

[jsTree] Populating the tree using JSON

[jsTree] Expand and collapse buttons.

[JavaScript][jQuery] How to enable/disable select field?

jQuery Tablesorter

Categories