Grid and texktboxes

EasyUI Forum

September 14, 2025, 01:43:57 AM

Welcome, Guest. Please login or register.

News:

Home

Help

EasyUI Forum > General Category > EasyUI for jQuery > Grid and texktboxes

Pages: [1]

« previous next »

Author

Topic: Grid and texktboxes (Read 10952 times)

jonbang

Newbie

Posts: 4

Grid and texktboxes

« on: February 29, 2016, 03:53:19 PM »

I am creating a small web-page for my CD/DVD-records. just for learning how things work. Getting the data in the grid is no problen, neither getting the data in the webpage. I have a database called cdarkiv. And two tables. OIne for info about the artist and the album, another table for the songs. Whar i would like to do is put the info from artist/album-table direct to the page, and the songs from that album to the grid. Is that possible, or i know it is, but how to do that?

As an alternativ i would like two grids. One for album/artist and one for the songs. When a line in artist/album-grid is marked, the songs will show on the othergrid....

And if i could use the same setup for adding and deleting as well....Anyone?


	Logged

stworthy

Administrator
Hero Member

Posts: 3581

Re: Grid and texktboxes

« Reply #1 on: March 02, 2016, 01:02:13 AM »

Here is the simple way for two grid solution. When selecting the 'artist' datagrid, the 'onSelect' event fires. You will be able to get the selected row and reload the 'songs' grid data. The code looks like this:

Code:

$('#artist').datagrid({
	onSelect: function(index,row){
		$('#songs').datagrid('load', {
			arlistId: row.id
		});
	}
})


	Logged

jonbang

Newbie

Posts: 4

Re: Grid and texktboxes

« Reply #2 on: March 02, 2016, 07:07:43 AM »

In the code below, where to put the example you gave me? This is relative new to me...:-)

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
   <meta name="keywords" content="jquery,ui,easy,easyui,web">
   <meta name="description" content="easyui help you build your web page easily!">
   <title>Build CRUD DataGrid with jQuery EasyUI - jQuery EasyUI Demo</title>
   <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/default/easyui.css">
   <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/icon.css">
   <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/demo/demo.css">
   <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.min.js"></script>
   <script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
   <script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.edatagrid.js"></script>
   <script type="text/javascript">
      $(function(){
         $('#dg').edatagrid({
            url: 'get_users.php',
            saveUrl: 'save_user.php',
            updateUrl: 'update_user.php',
            destroyUrl: 'destroy_user.php'
         });
      });
   </script>
</head>
<body>
   <h2>CRUD DataGrid</h2>
   <div class="demo-info" style="margin-bottom:10px">
      <div class="demo-tip icon-tip"> </div>
      <div>Double click the rad to begin editing.</div>
   </div>

   <table id="dg" title="My Users" style="width:700px;height:250px"
         toolbar="#toolbar" pagination="true" idField="id"
         rownumbers="true" fitColumns="true" singleSelect="true">
      <thead>
         <tr>
            <th field="actor_id" width="50" editor="{type:'validatebox',options:{required:true}}">First Name</th>
            <th field="first_name" width="50" editor="{type:'validatebox',options:{required:true}}">Last Name</th>
            <th field="last_name" width="50" editor="text">Phone</th>
            <th field="last_update" width="50" editor="{type:'validatebox',options:{validType:'email'}}">Email</th>
         </tr>
      </thead>
   </table>




   <div id="toolbar">
      <a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="javascript:$('#dg').edatagrid('addRow')">New</a>
      <a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="javascript:$('#dg').edatagrid('destroyRow')">Destroy</a>
      <a href="#" class="easyui-linkbutton" iconCls="icon-save" plain="true" onclick="javascript:$('#dg').edatagrid('saveRow')">Save</a>
      <a href="#" class="easyui-linkbutton" iconCls="icon-undo" plain="true" onclick="javascript:$('#dg').edatagrid('cancelRow')">Cancel</a>
   </div>

</body>
</html>


	Logged

stworthy

Administrator
Hero Member

Posts: 3581

Re: Grid and texktboxes

« Reply #3 on: March 02, 2016, 08:01:17 AM »

Please refer to the code below:

Code:

<table id="dg" title="My Users" style="width:700px;height:250px"
      toolbar="#toolbar" pagination="true" idField="id"
      rownumbers="true" fitColumns="true" singleSelect="true">
   <thead>
      <tr>
         <th field="actor_id" width="50" editor="{type:'validatebox',options:{required:true}}">First Name</th>
         <th field="first_name" width="50" editor="{type:'validatebox',options:{required:true}}">Last Name</th>
         <th field="last_name" width="50" editor="text">Phone</th>
         <th field="last_update" width="50" editor="{type:'validatebox',options:{validType:'email'}}">Email</th>
      </tr>
   </thead>
</table>
<table id="dg-songs" class="easyui-datagrid" style="width:700px;height:250px" data-options="
      url: ...,
      singleSelect: true
      ">
   <thead>
   ...
   </thead>
</table>
<script type="text/javascript">
   $(function(){
      $('#dg').edatagrid({
         url: 'get_users.php',
         saveUrl: 'save_user.php',
         updateUrl: 'update_user.php',
         destroyUrl: 'destroy_user.php',
         onSelect: function(index,row){
            $('#dg-songs').datagrid('load', {
               actor_id: row.actor_id
            });
         }
      });
   });
</script>


	Logged

jonbang

Newbie

Posts: 4

Re: Grid and texktboxes

« Reply #4 on: March 03, 2016, 02:52:22 PM »

Ok, this is what i get up:

The script is used twice, and the same query for the same database. Is that supposed to be right, or shuold there be another query in the second grid? I have here used an example from the sakila database, a view called actor_infoT\My plan is to get the row called film_info to be displayed in the second grid. The sql returns the actor_id, first_name and last_name in grid1, and film_info in grid2. But as you can see, only the rows in grid1 are displayed....What am i doing wrong?


« Last Edit: March 04, 2016, 10:32:51 AM by jonbang »	Logged

stworthy

Administrator
Hero Member

Posts: 3581

Re: Grid and texktboxes

« Reply #5 on: March 03, 2016, 08:28:40 PM »

There are two issues existing in your page.

1. The event name should be 'onSelect' not 'onselect'.
2. The 'url' property value is required in your 'dg-songs' datagrid.

Please correct them and try again.


	Logged

jonbang

Newbie

Posts: 4

Re: Grid and texktboxes

« Reply #6 on: March 04, 2016, 02:49:46 AM »

We are talking about the url-property in the table for dg-songs? What is this url supposed to point to?


	Logged

Pages: [1]

« previous next »