The form field components have no 'form' property, they must be moved to the <form> element.

Please use the combogrid instead, the combogrid can be bound with scrollview.

Please refer to this example https://www.jeasyui.com/demo/main/index.php?plugin=DateBox&theme=material-teal&dir=ltr&pitem=Date%20Format&sort=asc

Try this code to attach a clear icon on the combobox component.

Code:

$('#cc').combobox({
	icons: [{
		iconCls: 'icon-clear',
		handler: function(e){
			$(e.data.target).combobox('clear').combobox('textbox').focus();
		}
	}],
	onChange: function(value){
		if (value){
			$(this).combobox('getIcon', 0).css('visibility','visible')
		} else {
			$(this).combobox('getIcon', 0).css('visibility','hidden')
		}
	}
})

Your 'datagridview.php' should be:

Code:

<table id="dg" data-options="fit:true" class="easyui-datagrid">
	<thead>
		<tr>
		<th field="categoryName" halign="center" width="200" sortable="true" align="left">Category</th>
		<th field="categoryName2" halign="center" width="200" sortable="true" align="left">Category2</th>
		</tr>
	</thead>
</table>

No error occurs on the console.

Please look at this code.

Code:

<input name="name"  type="text"  class="easyui-validatebox" data-options="missingMessage:'foo',required:true" />

When you append this code to the form dynamically, you only create an <input> element with 'easyui-validatebox' class. You should create or parse it as an easyui component before using it.

The multiple validation rules should be set in 'data-options' attribute. Please look at this code below.

Code:

<input class="easyui-validatebox" data-options="
	required:true,
	validType:['email','length[0,20]']
">
<input class="easyui-validatebox" data-options="
	required:true,
	validType:{
		length:[10,30],
		remote:['http://.../action.do','paramName']
	}
">

The 'validType' attribute can only accept one validation rule, please use 'data-options' attribute and apply 'validType' property with multiple validation rules.

Please call the 'destroy' method to remove the dialog from DOM.

Please extend the 'color' editor on the datagrid.

Code:

<script type="text/javascript">
$.extend($.fn.datagrid.defaults.editors, {
	color: {
		init: function(container, options){
			var input = $('<input class="datagrid-editable-input">').appendTo(container);
			input.color(options)
			return input;
		},
		getValue: function(target){
			return $(target).color('getValue');
		},
		setValue: function(target, value){
			$(target).color('setValue',value);
		},
		resize: function(target, width){
			$(target)._outerWidth(width);
		}
	}
})
</script>

Try to override the CSS style.

Code:

<style type="text/css">
	.tree-indent,.tree-hit{
		transform: scale(1.4)
	}
</style>

This is the default convention. All the options and events of a component can be described in 'data-options' attribute.

The 'combogrid' has the 'loader' and 'loadFilter' functions to convert any data to the desired format. What's the data from the 'getorder.php' and 'product.php'.

Yes, you can define the modules before using it in a better way. Please look at this code:

Code:

$.extend(easyloader.modules, {
	edatagrid: {
		js:'https://www.jeasyui.com/easyui/jquery.edatagrid.js',
		dependencies:['datagrid']
	},
	datagridfilter: {
		js:'https://www.jeasyui.com/easyui/datagrid-filter.js',
		dependencies:['datagrid','treegrid','combogrid']
	}
})
using(['edatagrid','datagridfilter'], function(){
...
});

We are pleased to announce the availability of Vue EasyUI 1.2.

• Some bugs in previous version are fixed.
• Some new properties and methods are added.
• The floating label feature in form is added.
• The column resizing is available in datagrid.
• The 'FormField' component is added.
• ...

Please visit https://www.jeasyui.com/download/vx12.php to see more details.