<!doctype html>
<
html
>
<
head
>
<
meta
charset
=
"UTF-8"
>
<
meta
name
=
"viewport"
content="
initial-scale
=
1
.0,
maximum-scale
=
1
.0,
user-scalable
=
no
">
<
link
rel
=
"stylesheet"
type
=
"text/css"
href
=
"themes/metro/easyui.css"
>
<
link
rel
=
"stylesheet"
type
=
"text/css"
href
=
"themes/mobile.css"
>
<
link
rel
=
"stylesheet"
type
=
"text/css"
href
=
"themes/icon.css"
>
<
script
type
=
"text/javascript"
src
=
"jquery.min.js"
>
</
script
>
<
script
type
=
"text/javascript"
src
=
"jquery.easyui.min.js"
>
</
script
>
</
head
>
<
body
>
<
h2
>jQuery EasyUI ComboGrid</
h2
>
<
p
>Click the buttons to perform some actions.</
p
>
<
div
class
=
"easyui-panel"
style="width: 100%;
max-width: 400px; padding: 30px 60px;">
<
div
style
=
"margin-bottom:20px"
>
<
input
id
=
"combogridID"
class
=
"easyui-combogrid"
style
=
"width:100%"
data-options="
panelWidth: 600,
idField: 'studentid',
textField: 'studentname',
url: 'datafile.json',
method: 'get',
columns: [[
{
field: 'studentid',
title: 'Student ID',
width: 100
},
{
field: 'studentname',
title: 'Name',
width: 120
},
{
field: 'age',
title: 'Age',
width: 80,
align: 'right'
},
{
field: 'marksscored',
title: 'Marks',
width: 150,
align: 'center'
},
{
field: 'gender',
title: 'Gender',
width: 60,
align: 'center'
}
]],
fitColumns: true,
label: 'Select Student:',
labelPosition: 'top'
">
</
div
>
</
div
>
<
div
style
=
"margin:20px 0"
>
<
div
style
=
"margin:20px 0"
>
<
a
href
=
"javascript:void(0)"
class
=
"easyui-linkbutton"
onclick
=
"getValue()"
>
GetValue
</
a
>
<
a
href
=
"javascript:void(0)"
class
=
"easyui-linkbutton"
onclick
=
"setValue()"
>
SetValue
</
a
>
<
a
href
=
"javascript:void(0)"
class
=
"easyui-linkbutton"
onclick
=
"setCustomValue()"
>
Set Custom Value
</
a
>
<
a
href
=
"javascript:void(0)"
class
=
"easyui-linkbutton"
onclick
=
"disable()"
>
Disable
</
a
>
<
a
href
=
"javascript:void(0)"
class
=
"easyui-linkbutton"
onclick
=
"enable()"
>
Enable
</
a
>
</
div
>
<
div
id
=
"getValueResult"
></
div
>
</
div
>
<
script
type
=
"text/javascript"
>
/* To set and get value */
function getValue() {
var val = $('#combogridID').combogrid('getValue');
$('#getValueResult').html(val + " is set");
}
function setValue() {
$('#combogridID').combogrid('setValue', 'ST-14');
}
function setCustomValue() {
$('#combogridID').combogrid('setValue', {
studentid: 'ST-19',
studentname: 'Pari'
});
}
/* To disable the combogrid */
function disable() {
$('#combogridID').combogrid('disable');
}
/* To enable the combogrid */
function enable() {
$('#combogridID').combogrid('enable');
}
</
script
>
</
body
>
</
html
>