码迷,mamicode.com
首页 > Web开发 > 详细

雷林鹏分享:jQuery EasyUI 应用 - 创建展开行明细编辑表单的 CRUD 应用

时间:2019-08-13 15:19:09      阅读:126      评论:0      收藏:0      [点我收藏+]

标签:头部   Matter   ble   _for   ext   图片   tle   表单   行数据   

  当切换数据网格视图(datagrid view)到 ‘detailview‘,用户可以展开一行来显示一些行的明细在行下面。这个功能允许您为防止在明细行面板(panel)中的编辑表单(form)提供一些合适的布局(layout)。在本教程中,我们使用数据网格(datagrid)组件来减小编辑表单(form)所占据空间。

技术图片

  步骤 1:在 HTML 标签中定义数据网格(DataGrid)

  

  url="get_users.php"

 

  toolbar="#toolbar"

  fitColumns="true" singleSelect="true">

  

 

  

 

  

 

  

 

  

 

  

 

  

 

  

 

  

First NameLast NamePhoneEmail

  

 

  New

  Destroy

  

 

  步骤 2:为数据网格(DataGrid)应用明细视图

  $(‘#dg‘).datagrid({

  view: detailview,

  detailFormatter:function(index,row){

  return ‘

 

‘;

 

  },

  onExpandRow: function(index,row){

  var ddv = $(this).datagrid(‘getRowDetail‘,index).find(‘div.ddv‘);

  ddv.panel({

  border:false,

  cache:true,

  href:‘show_form.php?index=‘+index,

  onLoad:function(){

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

  $(‘#dg‘).datagrid(‘selectRow‘,index);

  $(‘#dg‘).datagrid(‘getRowDetail‘,index).find(‘form‘).form(‘load‘,row);

  }

  });

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

  }

  });

  为了为数据网格(DataGrid)应用明细视图,在 html 页面头部引入 ‘datagrid-detailview.js‘ 文件。

  我们使用 ‘detailFormatter‘ 函数来生成行明细内容。 在这种情况下,我们返回一个用于放置编辑表单(form)的空的

。 当用户点击行展开按钮(‘+‘)时,‘onExpandRow‘ 事件将被触发,我们将通过 ajax 加载编辑表单(form)。 调用 ‘getRowDetail‘ 方法来得到行明细容器,所以我们能查找到行明细面板(panel)。 在行明细中创建面板(panel),加载从 ‘show_form.php‘ 返回的编辑表单(form)。

 

  步骤 3:创建编辑表单(Form)

  编辑表单(form)是从服务器加载的。

  show_form.php

  

 

  

 

  

 

  

 

  

 

  

 

  

 

  

 

  

 

  

 

  

 

  

 

  

 

  

 

  

 

First Name Last Name
Phone Email

  

 

  Save

  Cancel

  

 

  

 

  步骤 4:保存或取消编辑

  调用 ‘saveItem‘ 函数来保存一个用户或者调用 ‘cancelItem‘ 函数来取消编辑。

  function saveItem(index){

  var row = $(‘#dg‘).datagrid(‘getRows‘)[index];

  var url = row.isNewRecord ? ‘save_user.php‘ : ‘update_user.php?id=‘+row.id;

  $(‘#dg‘).datagrid(‘getRowDetail‘,index).find(‘form‘).form(‘submit‘,{

  url: url,

  onSubmit: function(){

  return $(this).form(‘validate‘);

  },

  success: function(data){

  data = eval(‘(‘+data+‘)‘);

  data.isNewRecord = false;

  $(‘#dg‘).datagrid(‘collapseRow‘,index);

  $(‘#dg‘).datagrid(‘updateRow‘,{

  index: index,

  row: data

  });

  }

  });

  }

  决定要回传哪一个 URL,然后查找表单(form)对象,并调用 ‘submit‘ 方法来提交表单(form)数据。当保存数据成功时,折叠并更新行数据。

  function cancelItem(index){

  var row = $(‘#dg‘).datagrid(‘getRows‘)[index];

  if (row.isNewRecord){

  $(‘#dg‘).datagrid(‘deleteRow‘,index);

  } else {

  $(‘#dg‘).datagrid(‘collapseRow‘,index);

  }

  }

  当取消编辑动作时,如果该行是新行而且还没有保存,直接删除该行,否则折叠该行。

  下载 jQuery EasyUI 实例

  jeasyui-app-crud3.zip(编辑:雷林鹏 来源:网络 侵删)

雷林鹏分享:jQuery EasyUI 应用 - 创建展开行明细编辑表单的 CRUD 应用

标签:头部   Matter   ble   _for   ext   图片   tle   表单   行数据   

原文地址:https://www.cnblogs.com/linpeng1/p/11345813.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!