Print Page - reusable and custom easuiui-objects [Solved]

Title: reusable and custom easuiui-objects [Solved]
Post by: devnull on August 30, 2015, 06:25:19 PM

Is there an easy way to create a custom or reusable easyui-object ?

For example if I create a generic datagrid that handles file attachments, that I want to re-use in multiple places, can I somehow extend the object so that it will call the generic instance ??

i.e.

Code:

<table class="easyui-datagrid-filegrid">

Title: Re: reusable and custom easuiui-objects
Post by: stworthy on August 31, 2015, 01:26:06 AM

You can register the file datagrid in the $.parser so that it can be auto parsed from the <table> markup.

Code:

<script>
$.fn.filegrid = ...;

$.parser.plugins.push('filegrid');
</script>

<table class="easyui-filegrid" ...>
...
</table>

Title: Re: reusable and custom easuiui-objects
Post by: devnull on August 31, 2015, 01:33:53 AM

That sounds good, but what would the definition syntax be if I were to convert this into a reusable object:

Code:

  $('#files').datagrid({
    remoteSort:false,
    headerCls: 'plain',
    striped: true,
    singleSelect: true,
    checkOnSelect: false,
    fitColumns: true,
    method:'get',
    url:'/?_sqlid=admin^file_all&_func=get',
    
    columns:[[
      {field:'_CK',width:50,checkbox:true},
      {field:'tsid',title:'File ID',width:130,fixed:true,sortable:true,order:'asc'},
      {field:'fname',title:'Filename',width:250,fixed:true,sortable:true,order:'asc'},
      {field:'fclass',title:'Type',width:50,fixed:true,sortable:true,order:'asc'},
      {field:'uid',width:50,title:'UID',fixed:true,sortable:true,order:'asc'},
      
      {field:'appid',title:'App ID',width:150,fixed:true,sortable:true,order:'asc'},
      {field:'appdoc',title:'Doc Ref',width:100,fixed:true,sortable:true,order:'asc'},
      {field:'description',title:'Description',width:200}      
    ]]  
    
  })

Title: Re: reusable and custom easuiui-objects
Post by: stworthy on August 31, 2015, 01:51:05 AM

Rewrite it as a jQuery plugin, please refer to the code below:

Code:

<script type="text/javascript">
  (function($){
    $.fn.filegrid = function(){
      return this.each(function(){
        $(this).datagrid({
          remoteSort:false,
          headerCls: 'plain',
          striped: true,
          singleSelect: true,
          checkOnSelect: false,
          fitColumns: true,
          method:'get',
          url:'/?_sqlid=admin^file_all&_func=get',
          
          columns:[[
            {field:'_CK',width:50,checkbox:true},
            {field:'tsid',title:'File ID',width:130,fixed:true,sortable:true,order:'asc'},
            {field:'fname',title:'Filename',width:250,fixed:true,sortable:true,order:'asc'},
            {field:'fclass',title:'Type',width:50,fixed:true,sortable:true,order:'asc'},
            {field:'uid',width:50,title:'UID',fixed:true,sortable:true,order:'asc'},
            
            {field:'appid',title:'App ID',width:150,fixed:true,sortable:true,order:'asc'},
            {field:'appdoc',title:'Doc Ref',width:100,fixed:true,sortable:true,order:'asc'},
            {field:'description',title:'Description',width:200}      
          ]]  
        })
      })
    };

    $.parser.plugins.push('filegrid');
  })(jQuery);
</script>

Now you can declare your file datagrid as:

Code:

  <table class="easyui-filegrid" style="width:800px;height:300px"></table>

Title: Re: reusable and custom easuiui-objects
Post by: devnull on August 31, 2015, 11:17:12 PM

That's great, thanks so much, that makes a whole load of things much simpler :)

Title: Re: reusable and custom easuiui-objects [Solved]
Post by: devnull on September 25, 2015, 07:24:37 AM

How can I alias the datagrid object so that I can call it by a different name, something like this:

Code:

$.filegrid = $.fn.datagrid

EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: devnull on August 30, 2015, 06:25:19 PM