README

yiidhtmlx 组件和扩展

1. 第一个小部件将是 dhtmlx 图表
2. 第二个小部件将是 dhtmlx 网格

安装

将源添加到您的 composer.json > repositories 文件中

{
    "type": "package",
    "package": {
        "name": "philippfrenzel/yiidhtmlx",
        "version": "0.1.10",
        "authors": [
            {
                "name": "Philipp Frenzel",
                "homepage": "http://frenzel.net"
            }
        ],
        "source": {
            "url": "https://github.com/philippfrenzel/yiidhtmlx.git",
            "type": "git",
            "reference": "master"
        },
        "autoload": {
            "psr-0": { "yiidhtmlx\\": "/" }
        }
    }
}

虽然包已在 packagist.org 上注册，因此您只需添加一行代码即可运行！

"require": {
        "philippfrenzel/yiidhtmlx":"*"
},

是否已加载 MetroUI？

• 由于我使用 assetparser 扩展将 less 文件解析到我的发行版中，我注释了 assets.php 以避免静态 CSS 加载。如果您需要加载静态 CSS 文件，请取消注释条目！

图表

有关完整的功能列表，请尽管查看网站 www.dhtmlx.com

图表渲染一个 DHTMLX 图表组件。

例如，

use yiidhtmlx\Chart;

Chart::widget(array(
	   'options'=>array(
		   'id'    => 'myTestChart',
		   'style' => 'width:280px;height:250px;',
	   ),
    'clientOptions' => array(
        'value' => '#sales#',
		   'label' => '#year#'
    ),
    'clientDataOptions'=>array(
		'type'=>'json',
		'url'=>'data/data.json'))
	),
	'clientEvents'=>array(
		'click'=>'alert("clicked"'),
	)
));

网格

有关完整的功能列表，请尽管查看网站 www.dhtmlx.com

图表渲染一个 DHTMLX 图表组件。

例如，

use yiidhtmlx\Grid;

//needs to be registered manualy as the base url is only available later
$this->registerAssetBundle('yiidhtmlx/WidgetAsset');

$imgPath = Yii::$app->assetManager->getBundle('yiidhtmlx/WidgetAsset')->baseUrl . "/dhtmlxGrid/imgs/";

echo Grid::widget(
	array(
		'clientOptions'=>array(
		 	'parent' => 'myTestGrid',
		 	'auto_height' => true,
		 	'auto_width' => true,
		 	'skin' => "dhx_terrace",
		 	'columns' => array(
		 		array('label'=>'id','width'=>'40','type'=>'ro'),
				array('label'=>array(Yii::t('app','Address'),'#text_filter'),'type'=>'ed'),
				array('label'=>array(Yii::t('app','Name'),'#text_filter'),'type'=>'ed'),
				array('label'=>array(Yii::t('app','N/O'),'#select_filter'),'width'=>'50','type'=>'ch'),
				array('label'=>Yii::t('app','Cap.'),'width'=>'100','type'=>'ed'),
			),
		 	'image_path' => $imgPath
		),
    'enableSmartRendering' => false, 
    'options'=>array(
			'id'    => 'myTestGrid',
		),
		'clientDataOptions'=>array(
			'type'=>'json',
			'url'=>Html::url(array('/location/jsongridlocationdata'))
		),
		'clientEvents'=>array(
			'onRowSelect'=>'doOnRowSelect',
		)		
	)
);

由于我们使用智能渲染，通过 URL 引用的控制器中引用的完整功能应如下所示

   /**
   * returns the json for the dhtmlx grid
   * @param  date  $un       YYYYMMDD
   * @param  integer $posStart current position in grid scroll
   * @param  integer $count    last record handed over
   * @return JSON               json object, see dhtmlx for more information
   */
  public function actionDhtmlxgrid($un=NULL, $posStart=0, $count=0){
    $currentPage = 0;
    $pageSize = 50;
    
    if($posStart>0){
      $currentPage = round(($posStart / $pageSize),0);
    }

    $query = new Query;
    $provider = new ArrayDataProvider([
      'allModels' => $query->select('id,organisationName,taxNumber,registrationCountryCode')->from('tbl_party')->all(),
      'sort' => [
        'attributes' => ['id', 'organisationName', 'taxNumber'],
      ],
      'pagination' => [
        'pageSize' => $pageSize,
        'page' => $currentPage
      ],
    ]);

    //the grid header to pass over total count
    $clean = ['total_count'=>Party::find()->count(),'pos'=>$posStart];
    foreach($provider->getModels() AS $record){
      if(!is_null($record))
      {
        $clean['rows'][]=['id'=>$record['id'],'data'=>array_values($record)];
      }
    }

    header('Content-type: application/json');
    echo Json::encode($clean);
    exit();
  }

如果您想通过对象的 ID 脚本，名称将是 "dhtmlxID" -> dhtmlxmyTestGrid。

• clientOptions->parent 必须与 options->id 相同！
• 皮肤目前默认为 dhx_terrace。
• 有关客户端选项的完整列表，请查看 dhtmlx.com 网页
• 当您将 auto_height 设置为 false 时，您需要在 options->style 中添加 "height:400px"

树和上下文菜单

以下示例允许您将右键菜单附加到树上

$imgPath = Yii::$app->assetManager->getBundle('yiidhtmlx/WidgetAsset')->baseUrl . "/dhtmlxTree/imgs/csh_dhx_terrace/";
$imgMenuPath = Yii::$app->assetManager->getBundle('yiidhtmlx/WidgetAsset')->baseUrl . "/dhtmlxMenu/imgs/dhxmenu_dhx_terrace/";

echo Menu::widget(
	array(
		'clientOptions'=>array(
		 	'parent' => 'myCMSTreeMenu',
		 	'skin' => "dhx_terrace",
		 	'context' => true,
		 	'image_path' => $imgMenuPath,
		 	'items' => array(
		 		array('id'=>'createchild','text'=>'Create new Child','img'=>'img/dhtmlx/s4.gif'),
		 		array('id'=>'gotoparent','text'=>'Go to Parent','img'=>'img/dhtmlx/s3.gif')
		 	)
		),			
	    'options'=>array(
			'id'    => 'myCMSTreeMenu',
		),
		'clientEvents'=>array(
			'onClick' => 'doOnMenuSelect',
		)		
	)
);

echo Tree::widget(
	array(
		'enableContextMenu'=>'dhtmlxmyCMSTreeMenu',
		'clientOptions'=>array(
		 	'parent' => 'myCMSTree',
		 	'skin' => "terrace",
		 	'image_path' => $imgPath,
		 	'width' => '100%',
		 	'height' => '200px',
		 	'checkbox' => false,
		 	'smart_parsing' => true,
		),			
	    'options'=>array(
			'id'    => 'myCMSTree',
		),
		'clientDataOptions'=>array(
			'type'=>'json',
			'url'=>Html::url(array('/pages/jsontreeview','rootId'=>$rootId))
		),
		'clientEvents'=>array(
			'onClick' => 'doOnRowSelect',
		)		
	)
);

$jumpTarget = Html::url(array('/pages/view','id'=>''));
$jumpJS = <<<DEL

function doOnRowSelect(id,ind) {
	window.location = "$jumpTarget"+id;	
};

function doOnMenuSelect(id,type) {
	var Nodeid = dhtmlxmyCMSTree.contextID;
	alert(id);	
	alert(Nodeid);
};
DEL;
$this->registerJs($jumpJS); //where $this is the current view!

标签栏对象

use yiidhtmlx\Tabbar;

echo Tabbar::widget(
  [
  'clientOptions'=>[
      'parent'      => 'PurchaseOrderTabbar',
      'image_path'  => Yii::$app->AssetManager->getBundle('yiidhtmlx\TabbarObjectAsset')->baseUrl."/dhtmlxTabbar/imgs/dhx_terrace/",
      'skin'        => "dhx_terrace",       
      'tabs' => [
        ['id'=> 'tab_one','label'=>'id','width'=>'100%']
      ],
    ],
    'tabs'=>[
      ['tab_one'=>'tabrequested']
    ]   
  ]
);