EasyUI Forum
May 04, 2024, 01:27:17 PM *
Welcome, Guest. Please login or register.

Login with username, password and session length
News:
 
   Home   Help Search Login Register  
EasyUI Forum > General Category > General Discussion > EasyUI For Mobile Apps
Pages: [1]
« previous next »
  Print  
Author Topic: EasyUI For Mobile Apps  (Read 27775 times)
nvts
Newbie
*
Posts: 8


View Profile
« on: July 01, 2013, 06:23:33 AM »
Hello,

I am a newbie and have been searching the posts to see if anyone has used EasyUI with mobile apps?

I already have a sample working on my server hosting a MySQL db with one table that also has a directory for the php files needed. I am using the datagrid function at this time that is running in a html wrapper on the mobile device.

Now I would like to only use the code needed for use with screens that will have:

listview screen that will get all the records from the server and populate a list view.

When that record is selected it will then load the edit & delete screen for that record and then update the server for the changes or delete record.

On the listview  screen there is a button that will call a addnew screen to add a new record to the server.

I am going to use this code for the the process:

// Functions for processing to the server MySQL
 
var url;

function newUser(){
   $('#dlg').dialog('open').dialog('setTitle','New User');
   $('#fm').form('clear');
   url = 'http://www.mysite.com/mobione/phone/save_user.php';
}

function editUser(){
   var row = $('#dg').datagrid('getSelected');
   if (row){
      $('#dlg').dialog('open').dialog('setTitle','Edit User');
      $('#fm').form('load',row);
      url = 'http://www.mysite.com/mobione/phone/update_user.php?id='+row.id;
   }
}

function saveUser(){
   $('#fm').form('submit',{
      url: url,
      onSubmit: function(){
         return $(this).form('validate');
      },
      success: function(result){
         var result = eval('('+result+')');
         if (result.success){
            $('#dlg').dialog('close');      // close the dialog
            $('#dg').datagrid('reload');   // reload the user data
         } else {
            $.messager.show({
               title: 'Error',
               msg: result.msg
            });
         }
      }
   });
}

function removeUser(){
   var row = $('#dg').datagrid('getSelected');
   if (row){
      $.messager.confirm('Confirm','Are you sure you want to remove this user?',function(r){
         if (r){
            $.post('http://www.mysite.com/mobione/phone/remove_user.php',{id:row.id},function(result){
               if (result.success){
                  $('#dg').datagrid('reload');   // reload the user data
               } else {
                  $.messager.show({   // show error message
                     title: 'Error',
                     msg: result.msg
                  });
               }
            },'json');
         }
      });
   }
}

I need help on creating a non html datagrid to get the data to my screens and the send back to the server.

Any help or direction would be appreciated.

Thank you.
« Last Edit: July 02, 2013, 06:16:09 AM by nvts » Logged
stworthy
Administrator
Hero Member
*****
Posts: 3581


View Profile Email
« Reply #1 on: July 02, 2013, 07:39:58 AM »
What 'non html datagrid' means? Please look at the example below to see if it is what you want.
http://www.jeasyui.com/demo-mobile/main/index.php?plugin=DataGrid&theme=metro-gray&dir=ltr&pitem=
Logged
nvts
Newbie
*
Posts: 8


View Profile
« Reply #2 on: July 02, 2013, 08:32:03 AM »
Hello,

This is a start. I am looking to create a listview which it tried to attach the .png but would not let me. I am looking to put the basic crud sample now in a mobile device, but then just use easyUI to retrieve the data and post it back to the server with MySQL.

Thanks

Howard
Logged
nvts
Newbie
*
Posts: 8


View Profile
« Reply #3 on: July 03, 2013, 07:41:44 AM »
stworthy,

I was able to embed the JS and CSS files into my mobile app and use just the following in a html container/wrapper. This works great and it updates to my server hosting the MySQL db. Now what I was trying to explain is that I want to be able to use the easyui functions to render the dg, dlg, fm items in javascript. Then I will be able to use the easyui functions and not use the html grid to display, add, edit the records. I can use screens to do this. SO the main item needed would be to get the records from the server in an array so I could display through the screens.

Thanks

Howard

<body>
      
   <table id="dg" title="My Users" class="easyui-datagrid" style="width:auto;height:auto"
         url="http://www.mysite.com/mobione/phone/get_users.php"
         toolbar="#toolbar" pagination="true"
         rownumbers="true" fitColumns="true" singleSelect="true">
      <thead>
         <tr>
            <th field="firstname" width="40">First Name</th>
            <th field="lastname" width="40">Last Name</th>
         </tr>
      </thead>
   </table>
   <div id="toolbar">
      <a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="newUser()">New User</a>
      <a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editUser()">Edit User</a>
      <a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="removeUser()">Remove User</a>
   </div>
   
   <div id="dlg" class="easyui-dialog" style="width:auto;height:auto"
         closed="true" buttons="#dlg-buttons">
      <div class="ftitle">User Information</div>
      <form id="fm" method="post" novalidate>
         <div class="fitem">
            <label>First Name:</label>
            <input name="firstname" class="easyui-validatebox" required="true">
         </div>
         <div class="fitem">
            <label>Last Name:</label>
            <input name="lastname" class="easyui-validatebox" required="true">
         </div>
         <div class="fitem">
            <label>Phone:</label>
            <input name="phone">
         </div>
         <div class="fitem">
            <label>Email:</label>
            <input name="email" class="easyui-validatebox" validType="email">
         </div>
      </form>
   </div>
   <div id="dlg-buttons">
      <a href="#" class="easyui-linkbutton" iconCls="icon-ok" onclick="saveUser()">Save</a>
      <a href="#" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dlg').dialog('close')">Cancel</a>
   </div>
</body>


This is what I use for building the list for SQLite in an app. I am trying to do this using easyui functions to extract the data from the server to be able to use in the app till need to add, update, remove and so on and then use the php files on the server to do this.

 //build list css class list
  cssClassList = i==0 ? firstItemClass : '';
  cssClassList += i==itemCnt ? lastItemClass : '';
  cssClassList += internalItemClass;
  // checks the size and adds the ... if too long to display
  var nameSize = results.rows.item(i).dlname;
  var nameLimit = nameSize.length;
  if (nameLimit > 20) {nameTrim = nameSize.slice(0,20)+ '...';}
  else {nameTrim = nameSize;}
 
 
   // on the textcheck I use this for the id and have it hidden
    list.append(
     '<li id="m1-list-listItem1" class="' + cssClassList + '"' +
     '      data-action-click-id="action0" data-listitem-index="' + i + '">'+
     '   <div id="m1-list-listItem1-inner-div">'+
     '      <img id="m1-list-accessoryImage1" class="m1-clickable" '+
     '         src="res/images/tableRowDisclosureIndicator.png"/>'+
     '       <div id="m1-list-text2" class="m1-text">'+ nameTrim + ' - ' + results.rows.item(i).dltype +'</div>'+
     '       <div id="m1-list-textcheck" style="visibility:hidden">'+ results.rows.item(i).id +'</div>'+     
     '   </div>'+
     '</li>');
  }
   });
    });
« Last Edit: July 03, 2013, 07:57:02 AM by nvts » Logged
stworthy
Administrator
Hero Member
*****
Posts: 3581


View Profile Email
« Reply #4 on: July 03, 2013, 06:49:55 PM »
All the easyui components can be created via html markup or pure javascript code. Here is the code to demonstrate how to create the datagrid with pure javascript code.

Code:
var dg = $('<table id="dg"></table>').appendTo('body');
dg.datagrid({
	columns:[[
		{field:'firstname',title:'First Name',width:40},
		{field:'lastname',title:'Last Name',width:40}
	]],
	url:'...',
	pagination:true,
	rownumbers:true,
	fit:true,
	fitColumns:true,
	singleSelect:true,
	toolbar:[{
		text:'New User',
		iconCls:'icon-add',
		handler:function(){
			//...
		}
	},{
		text:'Edit User',
		iconCls:'icon-edit',
		handler:function(){
			//...
		}
	}]
});
Logged
Pages: [1]
  Print  
« previous next »
 
Jump to:  

Powered by MySQL Powered by PHP Powered by SMF 1.1.18 | SMF © 2013, Simple Machines Valid XHTML 1.0! Valid CSS!