easyui的crud(datagrid、dialog、form)

基本操作(如果需要详细了解请去jQuery EasyUI API 里了解)
1、datagrid(数据表格)

数据表格是基于table标签的

$(’#dg’).datagrid({
url:‘datagrid_data.json’,
columns:[[
{field:‘code’,title:‘代码’,width:100},
{field:‘name’,title:‘名称’,width:100},
{field:‘price’,title:‘价格’,width:100,align:‘right’}
]]
});
数据 ‘datagrid_data.json’ 可以是指定的 json文件,也可以是从后台传输过来的 json 对象。

(注:这个 json 的数据格式是有要求的,

{ “total”: count , “rows”:[

        {"field1": value1 ,"field2": value2 ,"field3": value3 },

        {"field1": value1 ,"field2": value2 ,"field3": value3 },

        {"field1": value1 ,"field2": value2 ,"field3": value3 }

]}

2、Dialog(对话框窗口)

Dialog Content.
使用Javascript创建对话框窗口也是允许的。我们创建一个模式窗口并调用'refresh'方法通过ajax读取内容。

$(’#dd’).dialog({
title: ‘My Dialog’,
closed: false,
cache: false,
href: ‘get_content.php’,
modal: true
});
$(’#dd’).dialog(‘refresh’, ‘new_content.php’);

3、Form(表单)

... 使普通表单成为ajax提交方式的表单。

$(’#ff’).form({
url:…,
onSubmit: function(){
// do some check
// return false to prevent submit;
},
success:function(data){
alert(data)
}
});
// submit the form
$(’#ff’).submit();
做一个提交操作。

$(’#ff’).form(‘submit’, {
url:…,
onSubmit: function(){
// do some check
// return false to prevent submit;
},
success:function(data){
alert(data)
}
});

猜你喜欢

转载自blog.csdn.net/qq_43226989/article/details/82972320
今日推荐