YouTip

-- Learning not just technology, but dreams! Home HTML JAVASCRIPT CSS VUE REACT PYTHON3 JAVA C C++ C# AI GO SQL LINUX VS CODE BOOTSTRAP GIT Local Bookmarks jQuery EasyUI Tutorial jQuery EasyUI Tutorial jQuery EasyUI Introduction jEasyUI Applications jEasyUI Creating a CRUD Application jEasyUI Creating a CRUD DataGrid jEasyUI CRUD Form Application jEasyUI Creating an RSS Reader jEasyUI Drag and Drop jEasyUI Basic Drag and Drop jEasyUI Creating a Drag and Drop Shopping Cart jEasyUI Creating a School Timetable jEasyUI Menu and Buttons jEasyUI Creating a Simple Menu jEasyUI Creating Link Buttons jEasyUI Creating Menu Buttons jEasyUI Creating Split Buttons jEasyUI Layout jEasyUI Creating a Border Layout jEasyUI Creating a Complex Layout jEasyUI Creating an Accordion jEasyUI Creating Tabs jEasyUI Dynamically Adding Tabs jEasyUI Adding Auto-playing Tabs jEasyUI Creating an XP-style Left Panel jEasyUI DataGrid jEasyUI Converting an HTML Table to a DataGrid jEasyUI Getting Selected Row Data jEasyUI Adding Search Functionality jEasyUI Adding a Toolbar jEasyUI Creating a Complex Toolbar jEasyUI Setting Frozen Columns jEasyUI Dynamically Changing Columns jEasyUI Formatting Columns jEasyUI Setting Sorting jEasyUI Custom Sorting jEasyUI Creating Column Groups jEasyUI Adding Checkboxes jEasyUI Custom Pagination jEasyUI Enabling Inline Editing jEasyUI Extending Editors jEasyUI Column Calculation jEasyUI Merging Cells jEasyUI Creating a Custom View jEasyUI Creating a Footer Summary jEasyUI Setting Row Background Color Conditionally jEasyUI Creating a Property Grid jEasyUI Extending Row Details jEasyUI Creating a Sub-DataGrid jEasyUI Displaying Large Data Sets jEasyUI Adding Pagination Component jEasyUI Window jEasyUI Creating a Simple Window jEasyUI Customizing Window Toolbar jEasyUI Window and Layout jEasyUI Creating a Dialog jEasyUI Customizing a Dialog jEasyUI Tree jEasyUI Creating a Tree with Markup jEasyUI Creating an Async Tree jEasyUI Adding Nodes to a Tree jEasyUI Creating a Tree with Checkboxes jEasyUI Tree Drag and Drop Control jEasyUI Loading Parent/Child Nodes in a Tree jEasyUI Creating a Basic TreeGrid jEasyUI Creating a Complex TreeGrid jEasyUI Dynamically Loading a TreeGrid jEasyUI Adding Pagination to a TreeGrid jEasyUI Lazy Loading Nodes in a TreeGrid jEasyUI Form jEasyUI Creating an Async Submit Form jEasyUI Form Validation jEasyUI Creating a Tree ComboBox jEasyUI Formatting a ComboBox jEasyUI Filtering a DataGrid ComboBox jEasyUI Reference Manual jQuery EasyUI Plugins jQuery EasyUI Extensions jQuery EasyUI DataGrid – Setting Row Background Color Conditionally jQuery EasyUI DataGrid – Extending Row Details Deep Dive Programming Software Utilities Technical Reference Information Web Design and Development Web Service Development Tools Scripting Languages Scripts Software Programming Languages jQuery EasyUI DataGrid - Creating a Property Grid A property grid has a built-in expand/collapse button that can be used to simply group rows. You can easily create a hierarchical list of editable properties. Setting up the HTML      Preparing the JSON data     [         {"name":"Name","value":"Bill Smith","group":"ID Settings","editor":"text"},         {"name":"Address","value":"","group":"ID Settings","editor":"text"},         {"name":"Age","value":"40","group":"ID Settings","editor":"numberbox"},         {"name":"Birthday","value":"01/02/2012","group":"ID Settings","editor":"datebox"},         {"name":"SSN","value":"123-456-7890","group":"ID Settings","editor":"text"},         {"name":"Email","value":"bill@gmail.com","group":"Marketing Settings","editor":{             "type":"validatebox",             "options":{                 "validType":"email"             }         }},         {"name":"FrequentBuyer","value":"false","group":"Marketing Settings","editor":{             "type":"checkbox",             "options":{                 "on":true,                 "off":false             }         }}     ] As you can see, creating a property grid requires no JavaScript code. You can simply extend the editor types. Download jQuery EasyUI Example jeasyui-datagrid-datagrid20.zip jQuery EasyUI DataGrid – Setting Row Background Color Conditionally jQuery EasyUI DataGrid – Extending Row Details ByteDance Coding Plan Supports mainstream large models like Doubao, GLM, DeepSeek, Kimi, MiniMax. Official supply, stable and reliable. Configuration Guide ¥9.9 / Month Activate Now iFlytek Star Coding Plan Includes free model call quotas for DeepSeek, GLM, Kimi, MiniMax. One-stop experience and deployment platform. Configuration Guide ¥3.9 / Month Activate Now Click here to share notes Category Navigation Python / Data Science AI / Intelligent Development Front-end Development Back-end Development Database Mobile Development DevOps / Engineering Programming Languages Computer Fundamentals XML / Web Service .NET Website Building Advertisement jQuery EasyUI Tutorial jQuery EasyUI Tutorial jQuery EasyUI Introduction jEasyUI Applications jEasyUI Creating a CRUD Application jEasyUI Creating a CRUD DataGrid jEasyUI CRUD Form Application jEasyUI Creating an RSS Reader jEasyUI Drag and Drop jEasyUI Basic Drag and Drop jEasyUI Creating a Drag and Drop Shopping Cart jEasyUI Creating a School Timetable jEasyUI Menu and Buttons jEasyUI Creating a Simple Menu jEasyUI Creating Link Buttons jEasyUI Creating Menu Buttons jEasyUI Creating Split Buttons jEasyUI Layout jEasyUI Creating a Border Layout jEasyUI Creating a Complex Layout jEasyUI Creating an Accordion jEasyUI Creating Tabs jEasyUI Dynamically Adding Tabs jEasyUI Adding Auto-playing Tabs jEasyUI Creating an XP-style Left Panel jEasyUI DataGrid jEasyUI Converting an HTML Table to a DataGrid jEasyUI Getting Selected Row Data jEasyUI Adding Search Functionality jEasyUI Adding a Toolbar jEasyUI Creating a Complex Toolbar jEasyUI Setting Frozen Columns jEasyUI Dynamically Changing Columns jEasyUI Formatting Columns jEasyUI Setting Sorting jEasyUI Custom Sorting jEasyUI Creating Column Groups jEasyUI Adding Checkboxes jEasyUI Custom Pagination jEasyUI Enabling Inline Editing jEasyUI Extending Editors jEasyUI Column Calculation jEasyUI Merging Cells jEasyUI Creating a Custom View jEasyUI Creating a Footer Summary jEasyUI Setting Row Background Color Conditionally jEasyUI Creating a Property Grid jEasyUI Extending Row Details jEasyUI Creating a Sub-DataGrid jEasyUI Displaying Large Data Sets jEasyUI Adding Pagination Component jEasyUI Window jEasyUI Creating a Simple Window jEasyUI Customizing Window Toolbar jEasyUI Window and Layout jEasyUI Creating a Dialog jEasyUI Customizing a Dialog jEasyUI Tree jEasyUI Creating a Tree with Markup jEasyUI Creating an Async Tree jEasyUI Adding Nodes to a Tree jEasyUI Creating a Tree with Checkboxes jEasyUI Tree Drag and Drop Control jEasyUI Loading Parent/Child Nodes in a Tree jEasyUI Creating a Basic TreeGrid jEasyUI Creating a Complex TreeGrid jEasyUI Dynamically Loading a TreeGrid jEasyUI Adding Pagination to a TreeGrid jEasyUI Lazy Loading Nodes in a TreeGrid jEasyUI Form jEasyUI Creating an Async Submit Form jEasyUI Form Validation jEasyUI Creating a Tree ComboBox jEasyUI Formatting a ComboBox jEasyUI Filtering a DataGrid ComboBox jEasyUI Reference Manual jQuery EasyUI Plugins jQuery EasyUI Extensions Online Examples ·HTML Examples ·CSS Examples ·JavaScript Examples ·Ajax Examples ·jQuery Examples ·XML Examples ·Java Examples Character Sets & Tools · HTML Character Set Settings · HTML ASCII Character Set · JS Obfuscation/Encryption · PNG/JPEG Image Compression · HTML Color Picker · JSON Formatting Tool · Random Number Generator Latest Updates · Large Model Multimodal (M... · Codex Advanced Configuration · AI Agent Terminology · ZCode Getting Started Tutorial · Loop Engineerin... · Claude Code Us... · Claude Code Us... Site Information · Feedback · Disclaimer · About Us · Article Archive Follow WeChat My Favorites Mark Article Browsing History Clear All No Records Yet