در این مقاله راجع به تغییر خودکار theme در Gridصحبت خواهیم کرد.ابتدا grid خود را توسط یک فایل json پر خواهیم کرد و سپس با گذاشتن یک select امکان انتخاب theme به کاربر را خواهیم داد.

در این مقاله راجع به تغییر خودکار theme در Gridصحبت خواهیم کرد.ابتدا grid خود را توسط یک فایل json پر خواهیم کرد و سپس با گذاشتن یک select امکان انتخاب theme به کاربر را خواهیم داد.

در مقاله ثبت کردن json درون Grid از نوع JQWidget JQX نحوه پر کردن grid توسط json آورده شده است .بعد از این ابتدا لازم است که یک سری Script خاص به صفحه اضافه کنیم .بعد از این باید یک سری لینک های خاص به css هایی که قرار است به این grid داده شود در قسمت head صفحه اضافه کنیم .تمام این css  ها در داخل Sample که ضمیمه این مقاله است اضافه شده است.

در مرحله بعدی لازم است که یک function جاوااسکریپتی به صفحه اضافه کنیم .نام این function ، applyNewCSS() است .این تابع به این صورت عمل می کند که به ازای انتخاب هر Css مختلفی که نام آن در داخل تگ Select آمده است یک فرمت خاصی به grid می دهد.این تابع ابتدا مقدار متغیر css درون خود را از Value تگ Select  به دست می آورد سپس بر اساس مقدار این متغیر چندین if نوشته شده است که این If ها بنابر مقدار css که به دست آمده است ابتدا عنصر jqxgrid  را توسط $ در صفحه پیدا  می کند و سپس مقدار theme آن را برابر با Css خاصی قرار می دهد.سپس در مرحله آخر و در داخل حلقه for ابتدا تمام لینک های  صفحه را توسط دستور link_tag = document.getElementsByTagName("link") پیدا می کند و سپس آنها را درون آرایه link_tag میریزد.بعد تمام این لینک ها را غیر فعال می کند . سپس آن لینکی  در داخل آرایه link_tag که مقدار ویژگی title آنها برابر با متغیر css باشد را فعال می کند .بدین ترتیب استایل انتخابی کاربر در لینک ها فعال می شود و به grid اعمال می شود.

کد این function به صورت زیر است

    function applyNewCSS() {  
        var css = $.trim($("#selectOptions").val());  
        if (css == 'metro') {  
            $("#jqxgrid").jqxGrid({  
                theme: 'metro';  
            });  
        } else if (css == 'metrodark') {  
            $("#jqxgrid").jqxGrid({  
                theme: 'metrodark';  
            });  
        } else if (css == 'office') {  
            $("#jqxgrid").jqxGrid({  
                theme: 'office';  
            });  
        } else if (css == 'orange') {  
            $("#jqxgrid").jqxGrid({  
                theme: 'orange';  
            });  
        } else if (css == 'energyblue') {  
            $("#jqxgrid").jqxGrid({  
                theme: 'energyblue';  
            });  
        } else if (css == 'darkblue') {  
            $("#jqxgrid").jqxGrid({  
                theme: 'darkblue';  
            });  
        } else if (css == 'black') {  
            $("#jqxgrid").jqxGrid({  
                theme: 'black';  
            });  
        } else if (css == 'shinyblack') {  
            $("#jqxgrid").jqxGrid({  
                theme: 'shinyblack';  
            });  
        } else if (css == 'lightness') {  
            $("#jqxgrid").jqxGrid({  
                theme: 'lightness';  
            });  
        } else if (css == 'ui-le-frog') {  
            $("#jqxgrid").jqxGrid({  
                theme: 'ui-le-frog';  
            });  
        } else if (css == 'ui-darkness') {  
            $("#jqxgrid").jqxGrid({  
                theme: 'ui-darkness';  
            });  
        } else if (css == 'ui-sunny') {  
            $("#jqxgrid").jqxGrid({  
                theme: 'ui-sunny';  
            });  
        } else if (css == 'android') {  
            $("#jqxgrid").jqxGrid({  
                theme: 'android';  
            });  
        }  
    }  

سپس در مرحله آخر و در داخل حلقه for ابتدا تمام لینک های  صفحه را توسط دستور link_tag = document.getElementsByTagName("link") پیدا می کند و سپس آنها را درون آرایه link_tag میریزد.بعد تمام این لینک ها را غیر فعال می کند . سپس آن لینکی  در داخل آرایه link_tag که مقدار ویژگی title آنها برابر با متغیر css باشد را فعال می کند .بدین ترتیب استایل انتخابی کاربر در لینک ها فعال می شود و به grid اعمال می شود.

    var i, link_tag;  
    for (i = 0, link_tag = document.getElementsByTagName("link"); i < link_tag.length; i++)  
    {  
        if ((link_tag[i].rel.indexOf("stylesheet") != -1) && link_tag[i].title)  
        {  
            link_tag[i].disabled = true;  
            if (link_tag[i].title == css)  
            {  
                link_tag[i].disabled = false;  
            }  
        }  
        set_cookie('style', css, 30);  
    }  

بعد از اجرای صفحه شکل زیر را خواهید دید.