Create jsTree in HTML

-

Introduction: Hello Guys, “Welcome back” Today i am here with another one new great article. In this article I will explain about to Create jsTress in HTML.

Implementation: On the HTML there will be three elements, first one is div with id named "jstree" and second one is HiddenField with the id named "selectedItems"   for storing selected items and other one is Button with the id named "btn_Submit" for selected items.  

<div id="jstree"></div>

<input type="hidden" id="selectedItems" />

<input type="button" value="Submit" id="btn_Submit" />

jQuery TreeView implementation

 

The style.min.css CSS file will be inherited on the HTML page. Also jquery.min.js and jstree.min.js script files will be  inherited on the HTML page. Inside the Jquery document ready event handler, the  JSON data is set in the variable. Now, the jQuery jsTree  plugin will be applied to the HTML DIV and the JSON data is assigned as data source in the data property. The jQuery jsTress plugin has been assigned with the changed.jstrss event handler.Inside the changed.jstree event handler of the jQuery jsTress plugin, an Array is declared.Then, a FOR loop will be executed over the selected (checked) items of jQuery jsTress and saved into the Array one by one. Finally, the Array of JSON object is arrange (Array) in a series and saved in the Hidden Field. The Button has been assigned with a jQuery click event handler for displaying selected checked items. When the Submit Button is clicked, the selected items of jQuery jsTress is set in the HiddenField which will be displayed using JavaScript Alert Message Box.

Here I am giving the complete HTML. You can copy and paste the whole code to enjoy the article execution.

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8" />

    <title></title>

    <style type="text/css">

        body { font-family: Arial; font-size: 10pt; }

    </style>

</head>

<body>

    <div id="jstree"></div>

    <input type="hidden" id="selectedItems" />

    <input type="button" value="Submit" id="btn_Submit" />

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" />

    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>

    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>

    <script type="text/javascript">

        $(function () {

            var json = [

                { "id": "1", "parent": "#", "text": "Mobiles" },

                { "id": "2", "parent": "#", "text": "Watches" },

                { "id": "3", "parent": "#", "text": "Shoes" },

                { "id": "1-1", "parent": "1", "text": "OPPO" },

                { "id": "1-2", "parent": "1", "text": "iPhone" },

                { "id": "1-3", "parent": "1", "text": "Moto" },

                { "id": "1-4", "parent": "1", "text": "Nokia" },

                { "id": "2-5", "parent": "2", "text": "Titan" },

                { "id": "2-6", "parent": "2", "text": "HMT" },

                { "id": "2-7", "parent": "2", "text": "Rolex" },

                { "id": "2-8", "parent": "2", "text": "Breitling" },

                { "id": "3-9", "parent": "3", "text": "Reebok" },

                { "id": "3-10", "parent": "3", "text": "Bata" },

                { "id": "3-11", "parent": "3", "text": "Redtape" }

            ];

            $('#jstree').on('changed.jstree', function (e, data) {

                var i, j;

                var selectedItems = [];

                for (i = 0, j = data.selected.length; i < j; i++) {

 

                    //Fetch the Id.

                    var id = data.selected[i];

 

                    //Remove the ParentId.

                    if (id.indexOf('-') != -1) {

                        id = id.split("-")[1];

                    }

 

                    //Add the Node to the JSON Array.

                    selectedItems.push({

                        text: data.instance.get_node(data.selected[i]).text,

                        id: id,

                        parent: data.selected[i].split("-")[0]

                    });

                }

 

                //Serialize the JSON Array and save in HiddenField.

                $('#selectedItems').val(JSON.stringify(selectedItems));

 

            }).jstree({

                "core": {

                    "themes": { "variant": "large" },

                    "data": json

                },

                "checkbox": { "keep_selected_style": false },

                "plugins": ["wholerow", "checkbox"]

            });

        });

 

        $("#btn_Submit").click(function () {

            alert($('#selectedItems').val());

        });

    </script>

</body>

</html>

Conclusion: In above code, I have been explained that how to Create jsTress in HTML . This code is very helpful for every developer. Bye Bye and take care of yourself Developers. We will come back shortly with the new article.


Regards

Using Asp.net

 

Comments

Post a Comment

Popular posts from this blog

Sending reset password link for one time use only in asp.net

-
Introduction: Hello developers, in this article i will explain that how we can create and send reset password link that will use onle one time in asp.net,after one time use this link will dispose and say that this link is wrong. This is very helpful article for every .net developer Implementation: Create two pages named forgetpassword.aspx and reset.aspx. Paste the code that below am giving, separately inside the both pages. This is a sample program you can change it accoring to your requirement. Inside your table there will be a colimn named code is necessary. Code for forgetpassword.aspx page: < head runat ="server">     < title > Forget Password </ title >     < style type ="text/css">         .style1         {             width : 100% ;  ...
Read more

add delete update inside gridview using store procedure in ASP.NET

-
Image
Introduction: Hello friends, in this article i will explain that how we can insert,delete,update the data in the gridview. Here i am using the store procedure to insert,delete and update the record. With the help of the store procedure the execution of the sql  query make fast. And less  the code of the aspx.cs page. So we can say  the use of the store procedure in the sql server is very important and also very helpful. Implementation: create a new website abb a page named gallery.aspx. Drag and drop the two textboxes, a fileuploader and a button from the toolbox named txt_album_name, txt_caption, fileuploader1 and btn_insert respectively. Here i am giving the complete code for the html page.  Code for .aspx page: < table class ="style1">         < tr >             < td class ="style2">      ...
Read more

Change password using asp.net

-
Image
Introduction : Hello friends, in this article i will explain that how we can change the password after login, in asp.net.This article is very useful for the all the .net developer. Implementation : create a new website add a page. Drag and drop three textboxes and two buttons   from the toolbox inside the   < body > body tag at the .aspx page.   Below   i am giving the complete code for the html page and .cs page.  Code for default.aspx page < div >     < table style =" width : 91% ; height : 97px ; " class ="tbl_reg_form">         < tr >             < td >                 Old Password </ td >             < td >        ...
Read more