zoukankan      html  css  js  c++  java
  • 雷林鹏分享:jQuery EasyUI 数据网格

      jQuery EasyUI 数据网格 - 创建子网格

      使用数据网格(datagrid)的详细视图,用户可以展开一行来显示附加的详细信息。 任何内容都可以加载作为行详细,子网格也可以动态加载。 本教程将向您展示如何在主网格上创建一个子网格。

      步骤 1:创建主网格

      

      url="datagrid22_getdata.php"

      title="DataGrid - SubGrid"

      singleSelect="true" fitColumns="true">

      

      

      

      

      

      

      

      

      

      

      

    Item IDProduct IDList PriceUnit CostAttributeStatus

      步骤 2:设置详细视图来显示子网格

      为了使用详细视图,请记得在页面头部引用视图脚本文件。

      

      $('#dg').datagrid({

      view: detailview,

      detailFormatter:function(index,row){

      return '

     

    ';

      },

      onExpandRow: function(index,row){

      var ddv = $(this).datagrid('getRowDetail',index).find('table.ddv');

      ddv.datagrid({

      url:'datagrid22_getdetail.php?itemid='+row.itemid,

      fitColumns:true,

      singleSelect:true,

      rownumbers:true,

      loadMsg:'',

      height:'auto',

      columns:[[

      {field:'orderid',title:'Order ID',100},

      {field:'quantity',title:'Quantity',100},

      {field:'unitprice',title:'Unit Price',100}

      ]],

      onResize:function(){

      $('#dg').datagrid('fixDetailRowHeight',index);

      },

      onLoadSuccess:function(){

      setTimeout(function(){

      $('#dg').datagrid('fixDetailRowHeight',index);

      },0);

      }

      });

      $('#dg').datagrid('fixDetailRowHeight',index);

      }

      });

      当用户点击展开按钮('+')时,'onExpandRow' 事件将被触发。 我们创建一个新的带有三列的子网格。 当子网格数据加载成功时或者改变尺寸大小时,请记得对主网格调用 'fixDetailRowHeight' 方法。

      步骤 3:服务器端代码

      datagrid22_getdata.php

      $result = array();

      include 'conn.php';

      $rs = mysql_query("select * from item where itemid in (select itemid from lineitem)");

      $items = array();

      while($row = mysql_fetch_object($rs)){

      array_push($items, $row);

      }

      echo json_encode($items);

      datagrid22_getdetail.php

      include 'conn.php';

      $itemid = mysql_real_escape_string($_REQUEST['itemid']);

      $rs = mysql_query("select * from lineitem where itemid='$itemid'");

      $items = array();

      while($row = mysql_fetch_object($rs)){

      array_push($items, $row);

      }

      echo json_encode($items);

      下载 jQuery EasyUI 实例

      jeasyui-datagrid-datagrid22.zip

      本文转载自:w3cschool(编辑:雷林鹏 来源:网络 侵删)

  • 相关阅读:
    [更新]一份包含: 采用RSA JWT(Json Web Token, RSA加密)的OAUTH2.0,HTTP BASIC,本地数据库验证,Windows域验证,单点登录的Spring Security配置文件
    fstab文件详解
    Struts2与Spring的Maven依赖冲突
    maven正确的集成命令-U -B 等
    CentOS6安装Jenkins
    CentOS6下Jenkins连接Git服务器出错的问题
    GitLab备份的创建与恢复
    开发App到上架应用市场需要经历什么?
    阅读笔记:A Few useful things to Know About machine Learning
    Feature Tools 简介
  • 原文地址:https://www.cnblogs.com/pengpeng1208/p/10716910.html
Copyright © 2011-2022 走看看