EasyUI Forum
May 20, 2024, 12:56:53 PM *
Welcome, Guest. Please login or register.

Login with username, password and session length
News:
 
   Home   Help Search Login Register  
Pages: [1]
  Print  
Author Topic: Datagrid Grouping from Menu Button.  (Read 5741 times)
AJLX
Newbie
*
Posts: 17


View Profile
« on: September 09, 2015, 01:16:38 AM »

Hey guys,

I have a menu that looks like this.

Code:
  <div class="menu-sep"></div>
            <div>
                <span>Group...</span>
                <div>
                    <div>Clear Grouping</div>
                    <div class="menu-sep"></div>
                    <div>By Fixture</div>
                    <div>By Location</div>
                    <div>By Universe</div>
                   
                </div>
            </div>

I would like to add an "onclick" function to each of these options which then updates my datagrid so that it looks like this:

http://www.jeasyui.com/demo/main/index.php?plugin=DataGrid&theme=default&dir=ltr&pitem=

I'm very new to Js so need some help with this. I'm not necessarily asking for the exact code, but at least some tips on what I need to look at to achieve this.

Regards,

AJLX
Logged
stworthy
Administrator
Hero Member
*****
Posts: 3581


View Profile Email
« Reply #1 on: September 09, 2015, 01:50:25 AM »

You do not need to add 'onclick' function to all the menu items, just listen to the 'onClick' event on the menu. Please refer to the code below:
Code:
<div id="mm" class="easyui-menu" style="width:120px;" data-options="
onClick: function(item){
//alert(item.text)
}
">
    <div>
        <span>Group...</span>
        <div>
            <div>Clear Grouping</div>
            <div class="menu-sep"></div>
            <div>By Fixture</div>
            <div>By Location</div>
            <div>By Universe</div>
        </div>
    </div>
</div>
Logged
AJLX
Newbie
*
Posts: 17


View Profile
« Reply #2 on: September 14, 2015, 01:25:33 AM »

Hey all,

I'm totally stuck with this! I can easily use something like:

Code:
 div.hide
and
Code:
div.show
 to show the correct tables. The problem with this is it seems very clunky! The only bit of the table that needs updating is the opening tag:

Code:
<table data-options:             data-options="
                singleSelect:true,
                collapsible:true,
                rownumbers:true,
                fitColumns:true,
                data:data,
                view:groupview,
                groupField:'productid',
                groupFormatter:function(value,rows){
                    return value + ' - ' + rows.length + ' Item(s)';
                }

Does anyone have any ideas? I'm used to being able to solve a problem like this in php by storing the relevant code in a variable, and then being able to echo it when it's needed.

Thanks

AJLX
Logged
Pages: [1]
  Print  
 
Jump to:  

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