 Show Posts
|
|
Pages: [1] 2 3 ... 5
|
|
8
|
General Category / EasyUI for jQuery / Why select the combobox error when another combobox selected ?
|
on: May 09, 2015, 06:10:04 AM
|
I want select combobox named Bureau when the combobox named Station selected, but An error occurred, it is show in attachs. btw: There is double request when the dialog opened. it is show in attachs. <form id="frmRestriction" method="post" action="/restrictions/index.asp?m=Restriction&a=Append" onSubmit="return false;">
<input type="hidden" name="Id" value="" />
<div style="width:100%;padding:3px;text-align:left;margin-left:auto;margin-right:auto;">
<div style="float:left;margin:4px">
<nobr><label>路局</label> <select class="easyui-combobox" name="Bureau" style="width:128px"></select></nobr>
</div>
<div style="float:left;margin:4px">
<nobr><label>到站</label> <select class="easyui-combobox" name="Station" style="width:111px"></select></nobr>
</div><div style="clear:both"></div>
<div style="float:left;margin:4px">
<nobr><label>停装日期</label> <input class="easyui-datebox" name="StartDate" editable="false" style="width:88px" value="2015-05-09" /> <input type="checkbox" name="HasFinishDate" value="1" style="vertical-align:-2px" onclick="$('[name=FinishDate]').prop('disabled',!this.checked)" /><label>恢复日期</label> <input class="easyui-datebox" name="FinishDate" editable="false" style="width:88px" value="" /></nobr>
</div><div style="clear:both"></div>
<div style="float:left;margin:4px">
<nobr><label>备注</label> <input class="easyui-textbox" name="Notes" value="" data-options="multiline:true,prompt:'最多输入100个字'" style="width:277px;height:88px" /></nobr>
</div>
</div>
</form>
<script type="text/javascript">
<!--
$(function(){
$('[name=FinishDate]').datebox({
onSelect:function(){
$('[name=HasFinishDate]').prop('checked', true);
}
});
$('[name=Bureau]').combobox({
editable:false,
valueField:'Id',
textField:'Name',
url:'/restrictions/index.asp?m=Restriction&a=Bureaus'
});
$('[name=Station]').combobox({
valueField:'Id',
textField:'Name',
mode:'remote',
url:'/restrictions/index.asp?m=Restriction&a=Stations',
prompt:'请输入拼音码或电报码',
delay:500,
onSelect:function(record){
// $('[name=Bureau]').combobox('select', record.Bureau);
}
});
});
//-->
</script> |
|
|
|
|
14
|
General Category / EasyUI for jQuery / How do i batch update partial columns in a datagrid with json data?
|
on: December 05, 2014, 12:20:57 AM
|
|
I have a datagrid with 10 columns, and load some data in it. How do i batch update the columns 1, 2, 5 and 7 with json data, and keep the columns 3, 4, 6, 8, 9, 10?
e.g. The full data:
{"total":3,"rows":[{"Col1":21,"Col2":35,"Col3":27,"Col4":58,"Col5":13,"Col6":25,"Col7":51,"Col8":24,"Col9":23,"Col10":85},{"Col1":23,"Col2":51,"Col3":24,"Col4":85,"Col5":35,"Col6":45,"Col7":36,"Col8":43,"Col9":16,"Col10":65},{"Col1":22,"Col2":38,"Col3":42,"Col4":53,"Col5":85,"Col6":65,"Col7":45,"Col8":86,"Col9":18,"Col10":95}]}
The partial data:
{"total":3,"rows":[{"Col1":26,"Col2":25,"Col5":33,"Col7":62},{"Col1":32,"Col2":46,"Col5":82,"Col7":34},{"Col1":42,"Col2":18,"Col5":73,"Col7":96}]}
|
|
|
|
|
15
|
General Category / EasyUI for jQuery / Performance of editable datagrid with mergecell
|
on: November 30, 2014, 02:51:06 AM
|
Datagrid's editor too slowly with 160 rows data! Howto improve the performance? Thanks very much! The 160 rows data extended from datagrid_data1.json. The code below modified from "Cache Editor for DataGrid" in the Live Demo. <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Cache Editor for DataGrid - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="/jquery-easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="/jquery-easyui/themes/icon.css">
<link rel="stylesheet" type="text/css" href="/jquery-easyui/demo/demo.css">
<script type="text/javascript" src="/jquery-easyui/jquery.min.js"></script>
<script type="text/javascript" src="/jquery-easyui/jquery.easyui.min.js"></script>
</head>
<body>
<h2>Cache Editor for DataGrid</h2>
<p>This example shows how to cache the editors for datagrid to improve the editing speed.</p>
<div style="margin:20px 0;"></div>
<table id="dg" class="easyui-datagrid" title="Cache Editor for DataGrid" style="width:700px;height:auto"
data-options="
iconCls: 'icon-edit',
singleSelect: true,
toolbar: '#tb',
url: 'datagrid_data.json',
method: 'get',
onLoadSuccess: onLoadSuccess,
onClickRow: onClickRow
">
<thead>
<tr>
<th data-options="field:'itemid',width:80">Item ID</th>
<th data-options="field:'productname',width:100">Product</th>
<th data-options="field:'listprice',width:80,align:'right',editor:{type:'numberbox',options:{precision:1}}">List Price</th>
<th data-options="field:'unitcost',width:80,align:'right',editor:'numberbox'">Unit Cost</th>
<th data-options="field:'attr1',width:250,editor:'text'">Attribute</th>
<th data-options="field:'status',width:60,align:'center',editor:{type:'checkbox',options:{on:'P',off:''}}">Status</th>
</tr>
</thead>
</table>
<div id="tb" style="height:auto">
<a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-save',plain:true" onclick="accept()">Accept</a>
<a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-undo',plain:true" onclick="reject()">Reject</a>
<a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-search',plain:true" onclick="getChanges()">GetChanges</a>
</div>
<script type="text/javascript">
(function($){
function getCacheContainer(t){
var view = $(t).closest('div.datagrid-view');
var c = view.children('div.datagrid-editor-cache');
if (!c.length){
c = $('<div class="datagrid-editor-cache" style="position:absolute;display:none"></div>').appendTo(view);
}
return c;
}
function getCacheEditor(t, field){
var c = getCacheContainer(t);
return c.children('div.datagrid-editor-cache-' + field);
}
function setCacheEditor(t, field, editor){
var c = getCacheContainer(t);
c.children('div.datagrid-editor-cache-' + field).remove();
var e = $('<div class="datagrid-editor-cache-' + field + '"></div>').appendTo(c);
e.append(editor);
}
var editors = $.fn.datagrid.defaults.editors;
for(var editor in editors){
var opts = editors[editor];
(function(){
var init = opts.init;
opts.init = function(container, options){
var field = $(container).closest('td[field]').attr('field');
var ed = getCacheEditor(container, field);
if (ed.length){
ed.appendTo(container);
return ed.find('.datagrid-editable-input');
} else {
return init(container, options);
}
}
})();
(function(){
var destroy = opts.destroy;
opts.destroy = function(target){
if ($(target).hasClass('datagrid-editable-input')){
var field = $(target).closest('td[field]').attr('field');
setCacheEditor(target, field, $(target).parent().children());
} else if (destroy){
destroy(target);
}
}
})();
}
})(jQuery);
</script>
<script type="text/javascript">
var editIndex = undefined, merges = new Array();
function onLoadSuccess(data){
$('#dg').datagrid('unselectAll');
var rowsLength = data.rows.length;
if (rowsLength > 0){
var curRow, firstRow = data.rows[0], product, counter = 0;
for (var rowIndex = 0; rowIndex <= rowsLength; rowIndex++){
if (rowIndex < rowsLength) curRow = data.rows[rowIndex];
if (rowIndex == rowsLength || curRow.productname != product){
merges[merges.length] = {"id":product, "index":rowIndex-counter, "rowspan":counter};
firstRow = curRow; counter = 1;
} else {
counter++;
}
product = curRow.productname;
}
mergeCells($('#dg'), merges);
$('#dg').datagrid('unselectAll');
}
}
function mergeCells(grid, merges, id){
if (arguments.length < 2){
return false;
} else if (arguments.length < 3){
id = null;
}
for (var index = merges.length - 1; index >= 0; index--){
if (id === null || id == merges[index].id){
grid.datagrid('mergeCells',{
field: 'productname',
index: merges[index].index,
rowspan: merges[index].rowspan
});
}
}
}
function endEditing(){
if (editIndex == undefined){return true}
if ($('#dg').datagrid('validateRow', editIndex)){
$('#dg').datagrid('endEdit', editIndex);
$.each(merges, function(index, m){
if (m.index == editIndex || (m.index>=editIndex-m.rowspan-1 && m.index<=editIndex)){
$('#dg').datagrid('mergeCells',{
field:'productname',
index:m.index,
rowspan:m.rowspan
})
}
})
editIndex = undefined;
return true;
} else {
return false;
}
}
function onClickRow(index){
if (editIndex != index){
if (endEditing()){
$('#dg').datagrid('selectRow', index)
.datagrid('beginEdit', index);
editIndex = index;
} else {
$('#dg').datagrid('selectRow', editIndex);
}
}
}
function accept(){
if (endEditing()){
$('#dg').datagrid('acceptChanges');
}
}
function reject(){
$('#dg').datagrid('rejectChanges');
editIndex = undefined;
}
function getChanges(){
var rows = $('#dg').datagrid('getChanges');
alert(rows.length+' rows are changed!');
}
</script>
</body>
</html> |
|
|
|
|
