JQuery EasyUI(43)

Roger_CoderLife

于 2020-03-30 10:14:48 发布

阅读量261

点赞数

分类专栏： WEB - jQuery EasyUI

原文链接：https://study.163.com/course/courseMain.htm?courseId=943002

版权

WEB - jQuery EasyUI 专栏收录该内容

55 篇文章

订阅专栏

第三十五章： PropertyGird（属性表格）组件

学习要点：

加载方式
属性列表
方法列表

一、加载方式

1.class加载方式：

<!DOCTYPE html>
<html>
  <head>
    <title>JQuery Easy UI</title>
    <meta charset="utf-8"/>
    <script type="text/javascript" src="easyui/jquery.min.js"></script>
    <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>     
    <script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>     
    <script type="text/javascript" src="js/index.js"></script> 
    <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"/>
    <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"/> 
    <style>
        .textbox{
            height:200px;
            margin:0;
            padding:0 2px;
            box-sizing:content-box;
       }
    </style>             
</head>
  <body>
      <table class="easyui-propertygrid" data-options="url:'property.json'" style="width:300px;"></table>
  </body>
</html>

//property.json
[[
  {
   "name":"PHP 版本";
   "value":"5.4";
   "group":"系统信息";
   "editor":"text";
  }
  {
   "name":"CPU 核心";
   "value":"双核四线程";
   "group":"系统信息";
   "editor":"text";
  }
  {
   "name":"超级管理员";
   "value":"Admin";
   "group":"管理信息";
   "editor":"text";
  }
  {
   "name":"管理密码";
   "value":"******";
   "group":"管理信息";
   "editor":"text";
  }
]]

2.JS调用加载：

<!DOCTYPE html>
<html>
  <head>
    <title>JQuery Easy UI</title>
    <meta charset="utf-8"/>
    <script type="text/javascript" src="easyui/jquery.min.js"></script>
    <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>     
    <script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>     
    <script type="text/javascript" src="js/index.js"></script> 
    <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"/>
    <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"/>
    <style>
        .textbox{
            height:200px;
            margin:0;
            padding:0 2px;
            box-sizing:content-box;
       }
    </style>              
</head>
  <body>
     <input id="box" name="box">   
  </body>
</html>

$(function(){
  $('#box').propertygrid({
       url:'property.json',
   });
});

//property.json
[[
  {
   "name":"PHP 版本";
   "value":"5.4";
   "group":"系统信息";
   "editor":"text";
  }
  {
   "name":"CPU 核心";
   "value":"双核四线程";
   "group":"系统信息";
   "editor":"text";
  }
  {
   "name":"超级管理员";
   "value":"Admin";
   "group":"管理信息";
   "editor":"text";
  }
  {
   "name":"管理密码";
   "value":"******";
   "group":"管理信息";
   "editor":"text";
  }
]]

属性表格扩展自datagrid（数据表格）。他的行数据格式和数据表格相同。作为一个属性行，以下字段是必须的：

name：字段名称。
value：字段值。
group：分组字段值。
editor：在编辑属性值的时候使用的编辑器对象。

二、属性列表

属性表格的属性扩展自dataGrid（数据表格），属性表格的新增的属性如下：

propertyGrid属性
属性名	值	说明
showGroup	boolean	定义是否想显示属性分组，默认值：false。
groupField	string	定义分组的字段名，默认值为group。
groupFormatter	function(group,rows)	定义如何格式化分组的值，该函数拥有如下参数：group：分组字段值。rows：属于该分组的所有行。

<!DOCTYPE html>
<html>
  <head>
    <title>JQuery Easy UI</title>
    <meta charset="utf-8"/>
    <script type="text/javascript" src="easyui/jquery.min.js"></script>
    <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>     
    <script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>     
    <script type="text/javascript" src="js/index.js"></script> 
    <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"/>
    <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"/>
    <style>
        .textbox{
            height:200px;
            margin:0;
            padding:0 2px;
            box-sizing:content-box;
       }
    </style>              
</head>
  <body>
     <input id="box" name="box">   
  </body>
</html>

$(function(){
  $('#box').propertygrid({
       url:'property.json',
       showGroup:true,
       groupField:'group1',
       groupFormatter:function(group,rows){
            return '['+ group +']';
     },
   });
});

//property.json
[[
  {
   "name":"PHP 版本";
   "value":"5.4";
   "group":"系统信息";
   "editor":"text";
  }
  {
   "name":"CPU 核心";
   "value":"双核四线程";
   "group":"系统信息";
   "editor":"text";
  }
  {
   "name":"超级管理员";
   "value":"Admin";
   "group":"管理信息";
   "editor":"text";
  }
  {
   "name":"管理密码";
   "value":"******";
   "group":"管理信息";
   "editor":"text";
  }
]]

三、方法列表

propertyGrid方法
方法名	参数	说明
expandGroup	groupIndex	展开指定分组。如果'groupIndex'未指定，则展开所有分组。
collapseGroup	groupIndex	折叠指定分组。如果'groupIndex'未指定，则折叠所有分组。

<!DOCTYPE html>
<html>
  <head>
    <title>JQuery Easy UI</title>
    <meta charset="utf-8"/>
    <script type="text/javascript" src="easyui/jquery.min.js"></script>
    <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>     
    <script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>     
    <script type="text/javascript" src="js/index.js"></script> 
    <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"/>
    <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"/>
    <style>
        .textbox{
            height:200px;
            margin:0;
            padding:0 2px;
            box-sizing:content-box;
       }
    </style>              
</head>
  <body>
     <input id="box" name="box">
     <input type="button" vlaue="按钮" onclick="abc(),">   
  </body>
</html>

$(function(){
  $('#box').propertygrid({
       url:'property.json',
       showGroup:true,
       groupField:'group1',
       groupFormatter:function(group,rows){
            return '['+ group +']';
     },
   });
});

function abc(){
    //$('#box').propertygrid('collapseGroup');
    $('#box').propertygrid('collapseGroup',0);
}

作者：Roger_CoderLife

链接：https://blog.csdn.net/Roger_CoderLife/article/details/103718264

本文根据网易云课堂JQuery EasyUI视频教程翻译成文档，转载请注明原文出处，欢迎转载