easyui的crud(datagrid、dialog、form)

  • Post author:
  • Post category:其他


基本操作(如果需要详细了解请去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)

}

});



版权声明:本文为qq_43226989原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。