[转载]Build CRUD Application with edit form in expanded row details - jQuery EasyUI

mikel阅读(902)

[转载]Build CRUD Application with edit form in expanded row details – jQuery EasyUI.

Build CRUD Application with edit form in expanded row details

Tutorial » Build CRUD Application with edit form in expanded row details

When switch the datagrid view to ‘detailview’, users can expand a row to show any details below that row. This feature allows you to provide any possible layout for its edit form that placed in detail row panel. In this tutorial, we are using datagrid component to reduce the space occupied by the edit form.

Step 1: Create DataGrid in HTML tag

  1. <table id=“dg” title=“My Users” style=“width:550px;height:250px” url=“get_users.php” toolbar=“#toolbar” fitcolumns=“true” singleselect=“true”>
  2. <thead>
  3. <tr>
  4. <th field=“firstname” width=“50”>First Name</th>
  5. <th field=“lastname” width=“50”>Last Name</th>
  6. <th field=“phone” width=“50”>Phone</th>
  7. <th field=“email” width=“50”>Email</th>
  8. </tr>
  9. </thead>
  10. </table>
  11. <div id=“toolbar”>
  12. <a href=“#” class=“easyui-linkbutton” iconcls=“icon-add” plain=“true” onclick=“newItem()”>New</a>
  13. <a href=“#” class=“easyui-linkbutton” iconcls=“icon-remove” plain=“true” onclick=“destroyItem()”>Destroy</a>
  14. </div>

Step 2: Apply Detail View for DataGrid

  1. $(‘#dg’).datagrid({
  2. view: detailview,
  3. detailFormatter:function(index,row){
  4. return ‘<div class=”ddv”></div>’;
  5. },
  6. onExpandRow: function(index,row){
  7. var ddv = $(this).datagrid(‘getRowDetail’,index).find(‘div.ddv’);
  8. ddv.panel({
  9. border:false,
  10. cache:true,
  11. href:‘show_form.php?index=’+index,
  12. onLoad:function(){
  13. $(‘#dg’).datagrid(‘fixDetailRowHeight’,index);
  14. $(‘#dg’).datagrid(‘selectRow’,index);
  15. $(‘#dg’).datagrid(‘getRowDetail’,index).find(‘form’).form(‘load’,row);
  16. }
  17. });
  18. $(‘#dg’).datagrid(‘fixDetailRowHeight’,index);
  19. }
  20. });

To use the detail view for datagrid, include the ‘datagrid-detailview.js’ file to your page header.

We use the ‘detailFormatter’ function to generate the row detail content. In this case, we return the empty <div> that the edit form will be placed in. When users click the row expand button(‘+’), the ‘onExpandRow’ event will be triggered and we can load the edit form via ajax. Call ‘getRowDetail’ method to get the row detail container, so we can find the row detail panel. Create the panel in row details and load the edit form that returned from ‘show_form.php’.

Step 3: Create Edit Form

The edit form is loaded from server.

show_form.php
  1. <form method=“post”>
  2. <table class=“dv-table” style=“width:100%;background:#fafafa;padding:5px;margin-top:5px;”>
  3. <tbody><tr>
  4. <td>First Name</td>
  5. <td><input name=“firstname” class=“easyui-validatebox” required=“true”></td>
  6. <td>Last Name</td>
  7. <td><input name=“lastname” class=“easyui-validatebox” required=“true”></td>
  8. </tr>
  9. <tr>
  10. <td>Phone</td>
  11. <td><input name=“phone”></td>
  12. <td>Email</td>
  13. <td><input name=“email” class=“easyui-validatebox” validtype=“email”></td>
  14. </tr>
  15. </tbody></table>
  16. <div style=“padding:5px 0;text-align:right;padding-right:30px”>
  17. <a href=“#” class=“easyui-linkbutton” iconcls=“icon-save” plain=“true” onclick=“saveItem(<?php echo $_REQUEST[‘index’];?>)”>Save</a>
  18. <a href=“#” class=“easyui-linkbutton” iconcls=“icon-cancel” plain=“true” onclick=“cancelItem(<?php echo $_REQUEST[‘index’];?>)”>Cancel</a>
  19. </div>
  20. </form>

Step 4: Save or Cancel editing

Call the ‘saveItem’ function to save a user or ‘cancelItem’ function to cancel the editing.

  1. function saveItem(index){
  2. var row = $(‘#dg’).datagrid(‘getRows’)[index];
  3. var url = row.isNewRecord ? ‘save_user.php’ : ‘update_user.php?id=’+row.id;
  4. $(‘#dg’).datagrid(‘getRowDetail’,index).find(‘form’).form(‘submit’,{
  5. url: url,
  6. onSubmit: function(){
  7. return $(this).form(‘validate’);
  8. },
  9. success: function(data){
  10. data = eval(‘(‘+data+‘)’);
  11. data.isNewRecord = false;
  12. $(‘#dg’).datagrid(‘collapseRow’,index);
  13. $(‘#dg’).datagrid(‘updateRow’,{
  14. index: index,
  15. row: data
  16. });
  17. }
  18. });
  19. }

Determine what is the URL to post to first and then find form object and call ‘submit’ method to post the form data. Collapse and update the row data while saving data successfully.

  1. function cancelItem(index){
  2. var row = $(‘#dg’).datagrid(‘getRows’)[index];
  3. if (row.isNewRecord){
  4. $(‘#dg’).datagrid(‘deleteRow’,index);
  5. else {
  6. $(‘#dg’).datagrid(‘collapseRow’,index);
  7. }
  8. }

When cancel the editing action, if the row is new and not save yet, delete the row directly, otherwise collapse the row.

Download the EasyUI example:

[转载]Jquery easyui 可编辑表格的保存方法

mikel阅读(1083)

[转载]Jquery easyui 可编辑表格的保存方法 – yuhonglei4025的个人空间 – 开源中国社区.

官方的例子只是简单的写了一个保存按钮。这里采用JSON保存被修改过的数据,并以JSON字符串的方式向服务器传递参数(这里仅仅使用了alert()打印了JSON字符串)。

{
				id : 'btnsave',
				text : '保存',
				disabled : true,
				iconCls : 'icon-save',
				handler : function() {
					if (lastEditIndex != undefined) {
						$('#tt').datagrid('endEdit', lastEditIndex);
					}

    				var insertRows = $('#tt').datagrid('getChanges','inserted');
    				var updateRows = $('#tt').datagrid('getChanges','updated');
    				var deleteRows = $('#tt').datagrid('getChanges','deleted');
    				var changesRows = {
    	    				inserted : [],
    	    				updated : [],
    	    				deleted : [],
    	    				};
   					if (insertRows.length>0) {
   						for (var i=0;i<insertRows.length;i++) {
   							changesRows.inserted.push(insertRows[i]);
   						}
   					}

   					if (updateRows.length>0) {
   						for (var k=0;k<updateRows.length;k++) {
   							changesRows.updated.push(updateRows[k]);
   						}
   					}

   					if (deleteRows.length>0) {
   						for (var j=0;j<deleteRows.length;j++) {
   							changesRows.deleted.push(deleteRows[j]);
   						}
   					}

   					alert(JSON.stringify(changesRows));

   					// 保存成功后,可以刷新页面,也可以:
					$('#tt').datagrid('acceptChanges');

					// 并且禁止保存、还原按钮
					$('#btnsave').linkbutton('disable');
					$('#btnreject').linkbutton('disable');
				}
			}

响应的需要导入的json2.js可以在http://www.json.org/js.html下载。

[转载]jQuery EasyUI:Enable DataGrid Inline Editing

mikel阅读(1315)

[转载]Enable DataGrid Inline Editing – jQuery EasyUI.

Tutorial » Enable DataGrid Inline Editing

The editable feature was recently added to the datagrid. It enable the user to add a new row to the datagrid. The user may also update one or more rows.

This tutorial shows how to create a datagrid with inline editing.

Create DataGrid

  1. $(function(){
  2. $(‘#tt’).datagrid({
  3. title:‘Editable DataGrid’,
  4. iconCls:‘icon-edit’,
  5. width:660,
  6. height:250,
  7. singleSelect:true,
  8. idField:‘itemid’,
  9. url:‘datagrid_data.json’,
  10. columns:[[
  11. {field:‘itemid’,title:‘Item ID’,width:60},
  12. {field:‘productid’,title:‘Product’,width:100,
  13. formatter:function(value){
  14. for(var i=0; i<products.length; i++){
  15. if (products[i].productid == value) return products[i].name;
  16. }
  17. return value;
  18. },
  19. editor:{
  20. type:‘combobox’,
  21. options:{
  22. valueField:‘productid’,
  23. textField:‘name’,
  24. data:products,
  25. required:true
  26. }
  27. }
  28. },
  29. {field:‘listprice’,title:‘List Price’,width:80,align:‘right’,editor:{type:‘numberbox’,options:{precision:1}}},
  30. {field:‘unitcost’,title:‘Unit Cost’,width:80,align:‘right’,editor:‘numberbox’},
  31. {field:‘attr1’,title:‘Attribute’,width:150,editor:‘text’},
  32. {field:‘status’,title:‘Status’,width:50,align:‘center’,
  33. editor:{
  34. type:‘checkbox’,
  35. options:{
  36. on: ‘P’,
  37. off: 
  38. }
  39. }
  40. },
  41. {field:‘action’,title:‘Action’,width:70,align:‘center’,
  42. formatter:function(value,row,index){
  43. if (row.editing){
  44. var s = ‘<a href=”#” onclick=”saverow(‘+index+‘)”>Save</a> ‘;
  45. var c = ‘<a href=”#” onclick=”cancelrow(‘+index+‘)”>Cancel</a>’;
  46. return s+c;
  47. else {
  48. var e = ‘<a href=”#” onclick=”editrow(‘+index+‘)”>Edit</a> ‘;
  49. var d = ‘<a href=”#” onclick=”deleterow(‘+index+‘)”>Delete</a>’;
  50. return e+d;
  51. }
  52. }
  53. }
  54. ]],
  55. onBeforeEdit:function(index,row){
  56. row.editing = true;
  57. updateActions();
  58. },
  59. onAfterEdit:function(index,row){
  60. row.editing = false;
  61. updateActions();
  62. },
  63. onCancelEdit:function(index,row){
  64. row.editing = false;
  65. updateActions();
  66. }
  67. });
  68. });
  69. function updateActions(){
  70. var rowcount = $(‘#tt’).datagrid(‘getRows’).length;
  71. for(var i=0; i<rowcount; i++){
  72. $(‘#tt’).datagrid(‘updateRow’,{
  73. index:i,
  74. row:{action:}
  75. });
  76. }
  77. }

To enable editing in datagrid, you should add a editor property to the columns. The editor tells datagrid how to edit the field and how to save the field value. As you can see we define three editor:text,combobox and checkbox.

  1. function editrow(index){
  2. $(‘#tt’).datagrid(‘beginEdit’, index);
  3. }
  4. function deleterow(index){
  5. $.messager.confirm(‘Confirm’,‘Are you sure?’,function(r){
  6. if (r){
  7. $(‘#tt’).datagrid(‘deleteRow’, index);
  8. }
  9. });
  10. }
  11. function saverow(index){
  12. $(‘#tt’).datagrid(‘endEdit’, index);
  13. }
  14. function cancelrow(index){
  15. $(‘#tt’).datagrid(‘cancelEdit’, index);
  16. }

Download the EasyUI example:



[转载]jquery-easyui编写用户管理小例子

mikel阅读(1514)

[转载]jquery-easyui编写用户管理小例子 – AJAX – web – ITeye论坛.

利用easyui编写一个用户管理小例子,目的是演示CRUD操作。先看一下效果图:

1、表格的定义:

Html代码  收藏代码
  1. <table id=“user-table”>
  2. <thead>
  3. <tr>
  4. <th field=“name” width=“100”>名称</th>
  5. <th field=“phone” width=“100”>电话</th>
  6. <th field=“addr” width=“100”>地址</th>
  7. <th field=“duty” width=“100”>职务</th>
  8. </tr>
  9. </thead>
  10. </table>

利用表格的THEAD来定义列,field属性对应用户数据模型的字段名称。

接着用JQuery创建表格,同时创建一个操作工具栏:

Js代码  收藏代码
  1. grid = $(‘#user-table’).datagrid({
  2. url:‘/demo1/user/getUsers’,
  3. title:‘用户资料’,
  4. width:600,
  5. height:300,
  6. singleSelect:true,
  7. toolbar:[{
  8. text:‘新增’,
  9. iconCls:‘icon-add’,
  10. handler:newUser
  11. },‘-‘,{
  12. text:‘修改’,
  13. iconCls:‘icon-edit’,
  14. handler:editUser
  15. },‘-‘,{
  16. text:‘删除’,
  17. iconCls:‘icon-remove’
  18. }]
  19. });

2、定义用户信息窗口和表单

Html代码  收藏代码
  1. <div id=“user-window” title=“用户窗口” style=“width:400px;height:250px;”>
  2. <div style=“padding:20px 20px 40px 80px;”>
  3. <form method=“post”>
  4. <table>
  5. <tr>
  6. <td>名称:</td>
  7. <td><input name=“name”></input></td>
  8. </tr>
  9. <tr>
  10. <td>电话:</td>
  11. <td><input name=“phone”></input></td>
  12. </tr>
  13. <tr>
  14. <td>地址:</td>
  15. <td><input name=“addr”></input></td>
  16. </tr>
  17. <tr>
  18. <td>职务:</td>
  19. <td><input name=“duty”></input></td>
  20. </tr>
  21. </table>
  22. </form>
  23. </div>
  24. <div style=“text-align:center;padding:5px;”>
  25. <a href=JavaScript:void(0)” onclick=“saveUser()” id=“btn-save” icon=“icon-save”>保存</a>
  26. <a href=JavaScript:void(0)” onclick=“closeWindow()” id=“btn-cancel” icon=“icon-cancel”>取消</a>
  27. </div>
  28. </div>

可以看到,窗口是一个DIV,表单是一个FORM,这种创建方式具有极大的灵活性,不需要学习成本,创建的JQuery代码如下:

Js代码  收藏代码
  1. $(‘#btn-save,#btn-cancel’).linkbutton();
  2. win = $(‘#user-window’).window({
  3. closed:true
  4. });
  5. form = win.find(‘form’);

其中建立了窗口的操作按钮,并获取表单对象。

3、进行CRUD操作的客户端代码:

Js代码  收藏代码
  1. function newUser(){
  2. win.window(‘open’);
  3. form.form(‘clear’);
  4. form.url = ‘/demo1/user/save’;
  5. }
  6. function editUser(){
  7. var row = grid.datagrid(‘getSelected’);
  8. if (row){
  9. win.window(‘open’);
  10. form.form(‘load’, ‘/demo1/user/getUser/’+row.id);
  11. form.url = ‘/demo1/user/update/’+row.id;
  12. else {
  13. $.messager.show({
  14. title:‘警告’,
  15. msg:‘请先选择用户资料。’
  16. });
  17. }
  18. }
  19. function saveUser(){
  20. form.form(‘submit’, {
  21. url:form.url,
  22. success:function(data){
  23. eval(‘data=’+data);
  24. if (data.success){
  25. grid.datagrid(‘reload’);
  26. win.window(‘close’);
  27. else {
  28. $.messager.alert(‘错误’,data.msg,‘error’);
  29. }
  30. }
  31. });
  32. }
  33. function closeWindow(){
  34. win.window(‘close’);
  35. }

例子中使用etmvc框架来处理后台的数据,演示例子中不使用数据库。

定义用户数据模型:

Java代码  收藏代码
  1. public class User {
  2. public Integer id;
  3. public String name;
  4. public String phone;
  5. public String addr;
  6. public String duty;
  7. public User clone(){
  8. User u = new User();
  9. u.id = id;
  10. u.name = name;
  11. u.phone = phone;
  12. u.addr = addr;
  13. u.duty = duty;
  14. return u;
  15. }
  16. }

定义后台用户的CRUD操作:

Java代码  收藏代码
  1. public class UserController extends ApplicationController{
  2. /**
  3. * 返回全部用户资料
  4. */
  5. public View getUsers() throws Exception{
  6. Map<String,Object> result = new HashMap<String,Object>();
  7. result.put(“total”, users.size());
  8. result.put(“rows”, users);
  9. return new JsonView(result);
  10. }
  11. /**
  12. * 取得指定的用户资料
  13. */
  14. public View getUser(Integer id) throws Exception{
  15. User user = users.get(id-1);
  16. return new JsonView(user);
  17. }
  18. /**
  19. * 保存用户资料,这里对用户名称进行非空检验,仅供演示用
  20. */
  21. public View save(User user) throws Exception{
  22. Map<String,Object> result = new HashMap<String,Object>();
  23. if (user.name.length() == 0){
  24. result.put(“failure”, true);
  25. result.put(“msg”, “用户名称必须填写。”);
  26. else {
  27. result.put(“success”, true);
  28. user.id = users.size()+1;
  29. users.add(user);
  30. }
  31. View view = new JsonView(result);
  32. view.setContentType(“text/html;charset=utf-8”);
  33. return view;
  34. }
  35. /**
  36. * 更新指定的用户资料
  37. */
  38. public View update(Integer id) throws Exception{
  39. Map<String,Object> result = new HashMap<String,Object>();
  40. User user = users.get(id-1).clone();
  41. updateModel(user);
  42. if (user.name.length() == 0){
  43. result.put(“failure”, true);
  44. result.put(“msg”, “用户名称必须填写。”);
  45. else {
  46. result.put(“success”, true);
  47. user.id = id;
  48. users.set(id-1, user);
  49. }
  50. View view = new JsonView(result);
  51. view.setContentType(“text/html;charset=utf-8”);
  52. return view;
  53. }
  54. // 用户资料测试数据
  55. private static List<User> users = new ArrayList<User>();
  56. static{
  57. for(int i=1; i<10; i++){
  58. User user = new User();
  59. user.id = i;
  60. user.name = “name” + i;
  61. user.phone = “phone” + i;
  62. user.addr = “addr” + i;
  63. user.duty = “duty” + i;
  64. users.add(user);
  65. }
  66. }
  67. }

完整的代码请见附件,可以看到,easyui具有极少的JS代码。

[转载]jquery easyui datagrid的增加,修改,删除

mikel阅读(1141)

[转载]jquery easyui datagrid的增加,修改,删除 – dodo-yufan – 博客园.

截图:

页面:

  1. <body>
  2. <form id=“form1” runat=“server”>
  3. <table id=“tt”>
  4. </table>
  5. </form>
  6. </body>

引用的JS:

  1. <link rel=“stylesheet” type=“text/css” href=“http://www.cnblogs.com/script/themes/default/easyui.css” />
  2. <link rel=“stylesheet” type=“text/css” href=“http://www.cnblogs.com/script/themes/icon.css” />
  3. <script type=“text/JavaScript src=“http://www.cnblogs.com/script/JQuery-1.4.2.min.js” </script>
  4. <script type=“text/JavaScript src=“http://www.cnblogs.com/script/JQuery.easyui.min.js” </script>
  5. <script type=“text/JavaScript src=“http://www.cnblogs.com/script/locale/easyui-lang-zh_CN.js” mce_src=“script/locale/easyui-lang-zh_CN.js”></script>

JS:

  1. <script type=“text/javascript”><!–
  2. $(function(){
  3. $(‘#tt’).datagrid({
  4. width:810,
  5. height:400,
  6. idField:‘xsbh’,
  7. url:‘studentHandler.ashx’,
  8. singleSelect:true,
  9. columns:[[
  10. {field:‘xsbh’,title:‘编号’,width:80},
  11. {field:‘UserName’,title:‘姓名’,width:100},
  12. {field:‘Sex’,title:‘性别’,width:30},
  13. {field:‘SchoolYear’,title:‘年份’,width:50},
  14. {field:‘opt’,title:‘操作’,width:100,align:‘center’,
  15. formatter:function(value,rec,index){
  16. var s = ‘<a href=”#” mce_href=”#” onclick=”view(\”+ rec.xsbh + ‘\’)”>查看</a> ‘;
  17. var e = ‘<a href=”#” mce_href=”#” onclick=”edit(\”+ rec.xsbh + ‘\’)”>编辑</a> ‘;
  18. var d = ‘<a href=”#” mce_href=”#” onclick=”del(\”+ index +‘\’)”>删除</a> ‘;
  19. return s+e+d;
  20. }
  21. }
  22. ]],
  23. toolbar:[{
  24. text:‘增加’,iconCls:‘icon-add’,handler:function(){
  25. window.location.href=‘StuAdd.aspx’;
  26. }
  27. },
  28. {text:‘导入’,iconCls:‘icon-add’,handler:function(){
  29. window.location.href=‘StuImport.aspx’
  30. }
  31. },
  32. {text:‘查找’,iconCls:‘icon-search’}
  33. ],
  34. pagination:true
  35. });
  36. })
  37. function view(bh) //转到查看页面
  38. {
  39. window.location.href=‘StuView.aspx?id=’+bh+‘&page=stu’;
  40. //              var row = $(‘#tt’).datagrid(‘getSelected’);
  41. //               if(row)
  42. //               {
  43. //                  alert(row.xsbh);
  44. //               }
  45. }
  46. function edit(bh) //转到编辑页面
  47. {
  48. window.location.href=‘StuEdit.aspx?id=’+bh;
  49. }
  50. function del(index){ //删除操作
  51. $.messager.confirm(‘确认’,‘确认删除?’,function(row){
  52. if(row){
  53. var selectedRow = $(‘#tt’).datagrid(‘getSelected’); //获取选中行
  54. $.ajax({
  55. url:‘delHandler.ashx?id=’+selectedRow.xsbh+‘&type=stu’,
  56. //加了个type,作用是以后不管什么删除,都可以转到这个ashx中处理
  57. success:function(){alert(‘删除成功’);}
  58. });
  59. $(‘#tt’).datagrid(‘deleteRow’,index);
  60. }
  61. })
  62. }
  63. // –></script>

这里面要注意的是,”操作”的跨行,一定要带上field:’opt’,当然,field可以是任何值,这个值不用从数据库中绑定,随便取.如果没有field的话,会弹出 “rowspan为空或不是对象”的错误

获取数据和分页ashx:

  1. using System;
  2. using System.Web;
  3. using System.Data;
  4. using System.Text;
  5. public class studentHandler : IHttpHandler {
  6. public void ProcessRequest (HttpContext context) {
  7. context.Response.ContentType = “text/plain”;
  8. DataSet ds = new DataSet();
  9. //点击datagrid的分页按钮,自动向后台发送2个参数,rows和page,代表每页记录数和页索引
  10. int row = int.Parse(context.Request[“rows”].ToString());
  11. int page = int.Parse(context.Request[“page”].ToString());
  12. ds = GetContent(row, page);
  13. string text =json.Dataset2Json(ds);
  14. context.Response.Write(text);
  15. }
  16. private DataSet GetContent(int pagesize,int pageindex)
  17. {
  18. Graduate.BLL.Student bll = new Graduate.BLL.Student();
  19. return bll.GetList(pagesize, pageindex);
  20. }
  21. public bool IsReusable {
  22. get {
  23. return false;
  24. }
  25. }
  26. }

删除ashx

  1. using System;
  2. using System.Web;
  3. using System.Web.SessionState;
  4. public class delHandler : IHttpHandler,IRequiresSessionState {
  5. public void ProcessRequest (HttpContext context) {
  6. context.Response.ContentType = “text/plain”;
  7. string id = context.Request[“id”].ToString();
  8. string type = context.Request[“type”].ToString();
  9. switch (type)
  10. {
  11. case “stu”:
  12. Graduate.BLL.Student stubll = new Graduate.BLL.Student();
  13. stubll.Delete(id, HttpContext.Current.Session[“username”].ToString(), HttpContext.Current.Session[“usertype”].ToString());
  14. break;
  15. default:
  16. break;
  17. }
  18. }
  19. public bool IsReusable {
  20. get {
  21. return false;
  22. }
  23. }
  24. }

IRequiresSessionState 是因为用到了服务器端的session,没有用到的话可以去掉

[转载]jquery_easyui_中文解析

mikel阅读(1017)

[转载]jquery_easyui_中文解析 – 、小虾米ミ. – 博客园.

最近经常接触easyui,但是easyui官网又总是上不去,所以在网上搜罗了easyui的中文解析,以备查询。

CSS类定义:

div easyui-window window窗口样式

属性如下:

1) modal:是否生成模态窗口。true[] false[]

2) shadow:是否显示窗口阴影。true[显示] false[不显示]

div easyui-panel 面板

属性如下:

1) title:该标题文本显示在面板头部。

2) iconCls:在面板上通过一个CSS类显示16×16图标。

3) width:设置面板宽度。默认auto

4) height:设置面板高度。默认auto

5) left:设置面板左边距。

6) top:设置面板顶部位置。

7) cls:在面板中增加一个Class类。

8) headerCls:在面板头部中增加一个Class类。

9) bodyCls:在面板内容中增加一个Class类。

10) style:在面板中增加一个指定样式。

11) fit:True时设置该面板尺寸适合于它的父容器。默认false

12) border:当定义时显示面板边界。默认true

13) doSize:如果设置为True,该面板将重绘大小,并重建布局。默认true

14) collapsible:当定义时显示可折叠面板的按钮。默认false

15) minimizable:当定义时显示最小化面板的按钮。默认false

16) maximizable:当定义时显示最大化面板的按钮。默认false

17) closable:当定义时显示关闭面板的按钮。默认false

18) tools:自定义工具栏,每个工具都包含两个属性:iconClshandler

19) collapsed:当定义时该面板初始化时处于收缩状态。默认false

20) minimized:当定义时该面板初始化时处于最小化状态。默认false

21) maximized:当定义时该面板初始化时处于最大化状态。默认false

22) closed:当定义时该面板初始化时处于关闭状态。默认false

23) href:一个url,加载远程数据并显示在面板中。

24) loadingMessage:当加载远程数据时,在面板中显示一个消息。默认Loading

事件如下:

1) onLoad:当远程数据加载完毕后激活。

2) onBeforeOpen:当面板打开前激活。

3) onOpen:当面板打开后激活。

4) onBeforeClose:当面板关闭前激活。

5) onClose:当面板关闭后激活。

6) onBeforeDestroy:当面板销毁前激活。

7) onDestroy:当面板销毁后激活。

8) onBeforeCollpase:当面板收缩前激活。

9) onCollapse:当面板收缩后激活。

10) onBeforeExpand:当面板扩展前激活。

11) onExpand:当面板扩展后激活。

12) onResize:当面板重绘后激活。

width:新建的外部宽度

height:新建的外部高度

13) onMove:当面板移动后激活。

left:左侧新位置。

top:顶部新位置。

14) onMaximize:当窗口最大化后激活。

15) onRestore:当窗口恢复到原来大小时激活。

16) onMinimize:当窗口最小化后激活。

方法如下:

1) options:返回options属性。

2) panel:返回面板对象。

3) header:返回面板头部对象。

4) body:返回面板主体对象。

5) setTitle:设置头部的标题文本。

6) open:forceOpen参数设置为true时,面板打开时绕过onBeforeOpen回调函数。

7) close:forceClose参数设置为true时,该面板关闭时绕过onBeforeClose回调函数。

8) destroy:forceDestroy参数设置为true时该面板销毁时绕过onBeforeDestroy回调函数。

9) refresh:href属性设置后刷新该面板以加载远程数据。

10) resize:设置面板的大小和布局。该options对象包含以下属性:

width:新的面板宽度。

height:新的面板高度。

left:新的面板左侧位置。

top:新的面板顶部位置。

11) move:移动面板到一个新的位置。该options对象包含以下属性:

left:新的面板左侧位置。

top:新的面板顶部位置。

a easyui-linkbutton 链接类型的按钮

属性如下:

1) disabled:True时禁用该按钮。默认false

2) plain:True时显示一个普通效果。默认false

input/textarea easyui-validatebox 字段验证

属性如下:

1) required:true[必需] false[不必需] 默认false

2) validType:

alength[a,b] 字段长度控制在ab之间。

bemail 验证Email

curl 验证网络地址。

3) missingMessage:当文本时出现空时弹出该工具提示,系统有默认[英文],自定义可覆盖它。

4) invalidMessage:当文本内容无效后弹出该工具提示,系统有默认[英文],自定义可覆盖它。

ul easyui-tree 树形结构

属性如下:

5) url:一个获取远程数据的地址。

6) animate:当展开或折叠节点时是否定义动画效果。true[] false[] 默认false

节点属性如下:

1) text:节点的显示文本。

2) id:节点ID,对于加载远程数据时非常重要。

3) state:节点状态,‘open’‘closed’,默认为‘open’。当设置为关闭,该节点包含子节点,并

4) attributes:为节点添加自定义属性。

5) children:以数组节点的方式定义一些字节点。

事件如下:

1) onClick:当用户点击一个节点时激活,该节点参数包含如下属性:

2) id:节点ID

3) text:节点文本

4) attributes:节点自定义属性。

5) target:目标点击的DOM对象。

6) onLoadSuccess:当数据成功加载数据时激活,该参数跟JQuery.ajax‘success’函数效果相同。

7) onLoadError:当数据加载数据失败时激活,该参数跟JQuery.ajax‘error’函数效果相同。

方法如下:

1) reload:重新加载树数据。

2) getSelected:获取选中的节点并返回它,如果没有选择节点将返回null

3) collapse:折叠一个节点,该目标参数是该节点的DOM对象。

4) expand:展开一个节点,该目标参数是该节点的DOM对象。

5) append:在一个父节点追加一些子节点。

param有两个属性:

parent:DOM对象,把它作为父节点追加(它们)

data:array,或者节点数据。

6) remove:删除它以及它以下的子节点,该目标参数是该节点的DOM对象。

table easyui-datagrid 表格

属性如下:

7) title:DataGrid面板的标题文本。

8) iconCls:一个CSS类,将提供一个背景图片作为标题图标。

9) border:当true时,显示该datagrid面板的边框。

10) width:面板宽度,自动列宽。

11) height:面板高度,自动列高。

12) columns:DataGrid列配置对象,查看column属性可获取更多信息。

13) frozenColumns:Columns属性相同,但是这些列将会被固定在左边。

14) striped:true时,单元格显示条纹。默认false

15) method:通过该方法类型请求远程数据。默认post

16) nowrap:true时,显示数据在同一行上。默认true

17) idField:说明哪个字段是一个标识字段。

18) url:一个URL,从远程站点获取数据。

19) loadMsg:当从远程站点加载数据时,显示一个提示信息。默认“Processing,please wait 。自定义覆盖。

20) pagination:true时在DataGrid底部显示一个分页工具栏。默认false

21) rownumbers:true时显示行号。默认false

22) singleSelect:true时只允许当前选择一行。默认false

23) fit:true时,设置大小以适应它的父容器。默认false

24) pageNumber:当设置分页属性时,初始化的页码编号。默认从1开始

25) )pageSize:当设置分页属性是,初始化的页面大小。默认10

26) pageList:当设置分页属性时,初始化页面的大小选择清单。默认[10,20,30,40,50]

27) queryParams:当请求远程数据时,也可以发送额外的参数。

28) sortName:定义哪列可以排序。

29) sortOrder:定义列的排列顺序,只能是‘asc’‘desc’。默认asc

Column属性如下:

1) title:该列标题文本。

2) field:该列对应的字段名称。

3) width:列宽。

4) rowspan:说明该单元格需要多少行数。

5) colspan:说明该单元格需要多少列数。

6) align:说明Column数据的对齐方式。‘left’‘right’‘center’ 都可以使用。

7) sortable:true时,允许该列进行排序。

8) checkbox:true时,允许该列出现checkbox

事件如下:

1) onLoadSuccess:当远程数据加载成功是激活。

2) onLoadError:当远程数据加载发现一些错误时激活。

3) onClickRow:当用户点击某行时激活,参数包含:

rowIndex: 点击的行索引,从0开始。

rowData: 点击行时对应的记录。

4) onDblClickRow:当用户双击某行时激活,参数包含:

rowIndex: 点击的行索引,从0开始。

rowData: 点击行时对应的记录。

5) onSortColumn:当用户对某列排序时激活,参数包含:

sort:排序字段名称。

order:排序字段类型。

6) onSelect:当用户选择某行时激活,参数包含:

rowIndex: 点击的行索引,从0开始。

rowData: 点击行时对应的记录。

7) onUnselect:当用户取消选择某行时激活,参数包含:

rowIndex: 点击的行索引,从0开始。

rowData: 点击行时对应的记录。

方法如下:

1) options:返回选择对象。

2) resize:重调大小,生成布局。

3) reload:重新加载数据。

4) fixColumnSize:固定列大小。

5) loadData:加载本地数据,过去的行会被删除。

6) getSelected:返回第一个选中行的记录,若未选返回null

7) getSelections:返回选中的所有行,当没有选择记录时将返回空数组。

8) clearSelections:清除所有选项的选择状态。

9) selectRow:选择一行,行索引从0开始。

10) selectRecord:通过传递一个ID值参数,选择一行。

11) unselectRow:取消选择一行。

div easyui-tabs tab容器

属性如下:

30) width:容器宽度,自动列宽。

31) height:容器高度,自动列高。

32) idSeed:该根id衍生成标签面板DOM id属性。默认0

33) plain:当true时,该Tab渲染不使用容器背景图片。默认false

34) fit:true时,设置该Tab大小以适应它的父容器。默认false

35) border:true时,显示该Tab边框。

36) scrollIncrement:

37) scrollDuration:

事件如下:

1) onLoad:当一个ajax Tab面板需要加载远程数据时激活。该参数跟JQuery.ajax‘success’函数效果相同。

2) onSelect:当用户选择一个Tab面板时激活。

3) onClose:当用户关闭一个Tab面板时激活。

方法如下:

1) resize:重绘该Tab容器的布局。

2) add:新增加一个Tab面板,该选项参数是一个配置对象,看Tab面板属性可获取更多信息。

3) close:关闭该Tab面板,标题参数显示你要关闭的对象。

4) select:选择一个Tab面板。

5) exists:如果该Tab面板存在即显示。

Tab面板属性如下:

1) id:Tab面板DOM id属性。

2) text:Tab面板标题文本。

3) content:Tab面板内容。

4) href:一个URL,加载远程内容以填充Tab面板。

5) cache:true时,缓存Tab面板,当href 属性设置后有效。默认true

6) icon:增加一个CSS class图标以显示在Tab面板的标题旁。

7) closable:true时,该Tab面板将显示可关闭按钮,点击能关闭该Tab面板。默认false

8) selected:true时,该Tab面板将被选中。默认false

9) width:面板宽度,自动列宽。

10) height:面板高度,自动列高。

div menu-sep 菜单分隔线

a easyui-splitbutton 菜单列

div easyui-accordion 手风琴式下拉框

继承自panel

select easyui-combobox 组合下拉框

属性如下:

38) width:容器宽度,自动列宽。

39) listWidth:该组合下拉框的宽度。

40) listHeight:该组合下拉框的高度。

41) valueField:把该基础数据的值名称绑定到组合下拉框中[value]

42) textField:把该基础数据的字段名称绑定到组合下拉框中

43) editable:True时,可直接在文字域中键入文本。默认true

44) url:一个URL,从远程加载列表数据。

事件如下:

1) onLoadSuccess:当远程数据加载成功是激活。

2) onLoadError:当远程数据加载发现一些错误时激活。

3) onSelect:当用户选择一个列表选项时激活。

4) onChange:当该字段的值发生改变时激活。

方法如下:

1) select: 在下拉列表中选择一个值。

2) setValue: 设置指定值到该字段。在‘param’ 参数可以是一个字符串或者一个JS对象。注:JS对象包含的属性对应valueFieldTextField两个属性。

3) getValue: 获取该字段的值。

4) reload: 重新请求远程列表数据。

select easyui-combotree 组合树形框

属性如下:

45) width:容器宽度,自动列宽。

46) treeWidth:该树形下拉框的宽度。

47) treeHeight:该树形下拉框的高度。

48) url:一个URL,从远程加载树形数据。

事件如下:

1) onSelect:当用户选择一个树形节点时激活。

2) onChange:当该字段的值发生改变时激活。

方法如下:

1) setValue: 设置指定值到该字段。在‘param’ 参数可以是一个树形节点ID值或者一个JS对象。注:JS对象包含的属性对应idtext两个属性。

2) getValue: 获取该字段的值。

3) reload: 重新请求远程列表数据。

body[div] easyui-layout 布局

属性如下:

49) title:该面板标题文本。

50) region:定义布局面板的位置,包含下列值:north,south, east, west, center

51) border:True时显示布局面板的边框。默认为True

52) split: True时显示一个分割符以使用户改变面板的尺寸。默认false

53) icon:一个图标CSS类,在面板头部显示一个图标。

54) href:一个URL,以从远程站点加载数据。

div easyui-menu 菜单

属性如下:

55) zIndex: Menu z-index样式。注释:z-index 属性设置元素的堆叠顺序。

56) left:菜单左起位置。默认0

57) top: 菜单顶部位置。默认0

58) href:当点击菜单项时能在当前浏览器窗口显示不同的网址。

事件如下:

1) onShow:激活后显示菜单。

2) onHide:激活后隐藏菜单。

方法如下:

1) show:在指定的位置显示一个菜单。该位置上包含两个参数:

2) left:新的左起位置。

3) top:新的顶部位置。

4) hide:隐藏一个菜单。

a easyui-menubutton 菜单按钮

属性如下:

59) disabled:True时禁用该按钮。默认false

60) plain:True时显示一个普通效果。默认false

61) menu:一个选择器名称,用来创建相应的菜单。

62) duration: 当悬停该按钮时,定义菜单的持续显示时间,单位为毫秒。默认

input easyui-numberbox 数字输入框

选项如下:

63) min:允许的最小值。当输入值小于最小值时,显示最小值。

64) max:允许的最大值。当输入值大于最大值时,显示最大值。

65) precision:分隔符后能精确的小数点位数。整数默认会追加小数点位数。

JS定义:

window window窗口

.tree 树形结构

.datagrid 表格

.combobox 组合下拉框

.combotree 组合树形框

.dialog 对话框

继承自window

私有属性如下:

1) title:该对话框标题文本。默认“New Dialog”

2) collapsible:True时可显示折叠按钮。默认false

3) minimizable:True时可显示最小化按钮。默认false

4) maximizable:True时可显示最大化按钮。默认false

5) resizable:True时能重绘对话框大小。默认false

6) toolbar:该工具栏置于对话框的顶部,每个工具栏包含:text, iconCls, disabled, handler等属性。

7) buttons:这个按钮置于对话框的底部,每个按钮包含:text, iconCls, handler等属性。

.draggable 可自由拖动的块

属性如下:

1) handle:选择“#id”进行拖动。

2) disabled:True时停止自由拖动。默认false

3) edge:开始拖动拖动块时的宽度。默认0

4) axis:当拖动块移动时定义轴,可选值是‘v’或者‘h’,当超出‘v’‘h’的方位时将设置为null

事件如下:

1) onStartDrag:当目标对象开始拖动时激活。

2) onDrag:在拖动期间激活。返回false将不会实际拖动它(的位置)

3) onStopDrag:当目标对象停止拖动时激活。

.linkbutton 链式按钮

.messager 消息框

选项如下:

1) ok:显示确定按钮文本。

2) cancel:显示取消按钮文本。

方法如下

1) show:在屏幕的右下角出现一个消息框。该选项参数是一个配置对象,它包括:

showType:定义消息框显示的模式,可选值包括:null,slide,fade,show.默认slide.

showSpeed: 定义消息框完成显示的时间。默认600毫秒。

width: 定义消息框的宽度。默认250

height:定义消息框的高度。默认100

msg:定义消息框显示的文本。

title: 在消息框面板头部显示标题文本。

timeout: 如果定义为0,消息框将不会自动关闭,除非用户手动关闭它。如果定义为非0值,消息框会在超时结束时自动关闭它。单位毫秒。

2) alert:显示一个打印窗口。它的参数如下:

title: 在头部显示标题文本。

msg:显示文本内容。

icon: 显示图标。可选值:error,question,info,warning

fn: 当窗口关闭后触发回调函数。

3) confirm:显示一个包含确定和取消按钮的确认消息框。参数包括:

title:在头部显示标题文本。

msg: 显示文本内容。

fn(b):回调函数,当用户点击OK按钮,返回True,才会处理该函数,其它按钮返回false,不处理。

4) prompt:显示一个消息框,包含OKCancel按钮并提示用户输入一些文本。参数包括:

title:在头部显示标题文本。

msg:显示文本内容。

fn(val):该回调函数处理用户输入的参数值。

.pagination 页码工具条

属性如下:

1) total:当分页条创建后设置的记录数。默认1

2) pageSize:页面大小。默认10

3) pageNumber:当分页创建后显示的页码。默认1

4) pageList:用户能更改页面的大小。您也可以改变该属性定义的默认大小。默认[10,20,30,50]

5) loading:定义是否正在加载。默认false

6) buttons:定义自定义按钮,每个按钮都包含两个属性:

iconCls: CSS类将显示一个背景图标。

handler: 当按钮点击时触发一个处理函数。

7) beforePageText:当输入组件前显示一个标签文本。

8) afterPageText:当输入组件后显示一个标签文本。

9) displayMsg:显示一个页面信息。

方法如下:

1) onSelectPage:当用户选择一个新页面时激活。该回调函数包括两个参数:

2) pageNumber: 该新页面的页码。

3) pageSize:该新页面的大小。

[转载]Visual Studio技巧之打造拥有自己标识的代码模板

mikel阅读(1065)

[转载]Visual Studio技巧之打造拥有自己标识的代码模板 – 周公 – 博客园.

可能经过很多博客的介绍,大家都知道代码段的使用,使用代码段可以很方便地生成一些常用的代码格式,确实对我们开发很方便。在团队开发中或者在某些情况下我们经常可能还会希望使用Visual Studio生成的代码自动带有一些信息,比如代码文件的创建时间、代码的说明及对命名空间的引用等等,实际上这个功能经周公证实在Visual Studio2005以上版本中就支持了。

下面以周公的本本的具体情况为例来加以说明,在周公的DELL 1425上系统是安装在C盘,在系统盘下同时安装了Visual Studio 2005Visual Studio 2008两套Visual Studio,并且安装了正版的SQL Server 2005,因为系统盘经常在Windows XPWindows 7之间切换并且还想在Windows XPWindows 7之间共享某些个人配置,所以将我的文档目录设置到了系统最后的一个盘G盘上了,具体路径为G:\My Documents,如果不做特别配置应为C:\Documents and Settings\zhoufoxcn\My Documents,这一点尤其注意。

这里针对Visual Studio 2008来进行说明,首先我们打开C:\Program Files\Microsoft Visual Studio 9.0\Common7\IDE这个目录(如果使用Visual Studio 2005则对应的路径为C:\Program Files\Microsoft Visual Studio 8\Common7\IDE),可以看到如下的情况:

从上图中可以看出ItemTemplatesProjectTemplates文件夹被周公选中了,因为这个文件夹对我们有用。其中ItemTemplates文件中存放着我们向项目添加文件时的模板,ProjectTemplates文件夹顾名思义存放着我们创建项目的模板。这些文件夹中的模板分别会在我们创建文件或者项目时出现。

除了这些模板之外,Visual Studio在新建时还会搜索当前用户的个人模板,在周公的本本上针对Visual Studio 2008的个人模板存放路径为G:\My Documents\Visual Studio 2008\Templates(如果没有经过这种这样的特殊设置,这个路径可能为C:\Documents and Settings\zhoufoxcn\My Documents\Visual Studio 2008\Templates,其中的zhoufoxcn为当前登录系统的用户名),打开这个文件夹,我们看到如下情况:

在没有做任何配置的时候这两个文件夹都是空的,在此时如果我们向项目中添加文件会看到这样的情况,如下图:

从上图可以看出,我的模板是空的。

好了,下面周公将C:\Program Files\Microsoft Visual Studio 9.0\Common7\IDE下的ItemTemplatesProjectTemplates文件夹拷贝到了当前个人配置文件夹G:\My Documents\Visual Studio 2008\Templates下(请注意你的电脑配置与我的电脑配置中路径的对应关系),可能系统会提示是否覆盖,点击确认之后我们再在任何项目中创建新文件会看到下面的情况,如下图所示:

此时我们可以看到我的模板下可以创建的新文件类型和系统的一摸一样,如果此时我们选择创建的话,生成的文件内容也会和系统模板的一样。为了打造属于我们个性的代码,我们需要对我的模板进行改造。

举例来说,假如我们要改变系统默认生成的代码,想在创建代码时自动添加一些信息,比如我们想让默认生成的是public的,那么可以按照下面的步骤做:

首先打开我的模板存放路径,在周公这里这个路径是G:\My Documents\Visual Studio 2008\Templates\ItemTemplates(请注意你的可能与周公的不同),这个文件夹下存放的是包含VB.NETC++C#等新建项目的模板,如果我们要改变的是C#文件的,请继续打开C#文件的创建模板,在周公本本上这个路径为G:\My Documents\Visual Studio 2008\Templates\ItemTemplates\CSharp\Code\2052,在这个文件夹下有四个zip文件,名称是Class.zipCodeFile.zipInterface.zipNETCFv2-Class.zip,分别对应的是添加类、代码文件、接口及.NET Compact Framework类的模板,在每个zip压缩包里都有一个.cs文件和一个.vstemplate文件。在这里周公将Class.zip解压出来,这时的class.cs文件代码如下:

using System;
using System.Collections.Generic;
$
if$ ($targetframeworkversion$ == 3.5)using System.Linq;
$endif$
using System.Text;

namespace $rootnamespace$
{
class $safeitemrootname$
{
}
}

将代码更改如下:

代码

保存class.cs,然后利用压缩软件将class.cs和刚刚从Class.zip中解压出来Class.vstemplate文件压缩为Class.zip文件(注意一定要压缩成zip文件而不是rar或者其它格式文件,WinRAR提供这种功能),然后替换原来的Class.zip文件。

好了,现在我们可以检验我们的成果了。随便打开一个项目,按照“添加”“新建项”的步骤添加,在弹出的对话框中“我的模板”下选择“类”(因为我们刚刚改的就是我的模板中添加的类的模板),这时Visual Studio 2008按照模板生成的代码如下:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;

namespace WCFClient
{
/// <summary>
/// 作者:zhoufoxcn
/// 时间:2010-6-20 9:39:04
/// 公司:www.netskycn.com
/// 版权:2010-2012
/// CLR版本:2.0.50727.3603
/// 博客地址:http://blog.csdn.net/zhoufoxcn
/// Class1说明:本代码版权归周公所有,使用时必须带上周公博客地址
/// 唯一标识:f5d4bfbe-accd-4d77-92b0-1407db616ae1
/// </summary>
public class Class1
{
Class1()
{
}
}
}

从 上面的例子可以看出选择我的模板的项就会按照预定好的格式生成代码,如果我们对项目中的代码有特殊格式要求的话,在这里统一定制非常方便,至少周公以后会 用这种模板来写公布在博客上的代码,因为周公注意到有很网站喜欢将别人博客上的文章中的链接信息和作者信息去掉,这事实上违反了作者的声明。有时间的话我 们可以针对每一个项更改出自己的模板。

上面我们仅仅演示了生成新文件的配置,其实我们还可以更改新生成项目的配置,按照前面的操作我们添加新项目时也有我的模板选项,如下图所示:

不过即使从我的模板中选择创建新项目也和系统中的项目一样,因为没有经过任何特殊配置。我们可以修改G:\My Documents\Visual Studio 2008\Templates\ProjectTemplates\CSharp下的项目模板,它们同样也是一个zip文件,比如我们想要统一程序集信息,可以修改这个zip文件中的assemblyinfo.cs文件的内容,这样就不用每次都手动去修改程序集信息了。

通过上面的步骤之后可以让我们很方便地定制了添加新项或者新项目的模板,这在公司中团队开发中还是相当有用的,也方便对代码文件的格式的统一。

需要说明的是在编辑模板时会看到一个形如$time$$rootnamespace$之类的东西,这些算是生成模板时用到的变量吧,在编辑模板时可以使用哪些变量微软没有官方的资料,不过周公留意了一下,大概有如下:

Itemname

safeitemname

sateitemrootname

projectname

safeprojectname

rootnamespace

guid[1-10]

time

year

username

userdomain

machinename

clrversion

targetframeworkversion

registeredorganization

wizarddata

可能有些人对上面的变量名不是太理解,其实是有规律的,都是一到几个单词的全称,只不过没有遵循我们平常所说的CamelPascal命 名法则罢了(大家可以看的出不遵守命名法则确实难读多了),知道这个规律之后这些变量的用途大家都能顾名思义了,如果确实不能也能根据最终生成的代码推断 出它的用法的。此外,如果觉得每次都要从“我的模板下”选择很麻烦的话,可以用更改后自定义模板替换系统中的模板。在刚刚编辑模板时我们还看到了一些简单 逻辑,比如当使用的项目.NET Framework版本为3.5时会自动使用System.Linq命名空间,我们还可以模范系统模板中的逻辑增加更多更符合个人或者公司需要的逻辑。

周公

2010-06-20

[转载]如何在VS2008中使自定义模板实现与项目默认模板同样效果

mikel阅读(817)

[转载]如何在VS2008中使自定义模板实现与项目默认模板同样效果 – Happy Miao – 博客园.

最近一直想做一个基于Micro Framework 的扩展模板,但是网上制作模板的方式(Export的方式google一下就可以找到),只能将自定义模板加到My Templates 下面,但这样本人认为显得是不是很不专业?要是能把自己的模板向SDK那样,增加到左边的Project Type树单独的一个分类,是不是很专业哦

要想制作VS2008的模板,我首先想到的就是VS2008SDK,于是我下载了VS2008SDK 它里面有一篇专门的关于如何增加Project Type的文章,并且含有一个写好的例子:IronPython,但是编译运行该实例后只能在SDK特有的“Microsoft Visual Studio 2008 under Experimental hive”上增加IronPython类型。但是如果用户没有安装VS2008SDK那么这种方法就会行不通。

经过对VS2008SDK的研究,并没有实现我想达到的效果,我一时陷入迷茫,该怎么办呢

既然要实现在VS2008中自定义模板,与其本身自带的项目一样的模板效果,那么一定要找到VS2008默认那些模板的位置,经过查找可以发现其存在于“C:\Program Files\Microsoft Visual Studio 9.0\Common7\IDE\ProjectTemplates”

找到后我根据对该文件夹的分析,并与VS2008新建项目的层级进行对照,很自然的想到在C:”Program Files”Microsoft Visual Studio 9.0″Common7″IDE”ProjectTemplates”CSharp下创建一个文件夹暂时命名为Tuojie Framework。我想这样应该可以了吧,结果很令我失望

我在搜索了一些文件都没有发现什么线索后认为,一定是写在注册表了。但我在HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\VisualStudio\9.0\VSTemplate 下面只有UserFolderCacheFolder,这说明VS2008加载模板时一定是向Photoshop加载扩展程序时反射了指定文件夹。也就是说,我只要考到文件下,就可以了?我又一次陷入了困惑。

我继续在google 上搜索 Vs2008模板发现了VS2008中文版安装ASP.NET 3.5 Extensions模板遗失解决方法”的文章。知道了”C:\Program Files\Microsoft Visual Studio 9.0\Common7\IDE\devenv.exe”还可以增加参数setup,我试着运行了一下,重起了VS2008,果真实现了我想要的效果,接下来我又用网上最常用的制作模板的方法制作了两个模板放到”C:\Program Files\Microsoft Visual Studio 9.0\Common7\IDE\ProjectTemplates\CSharp\Tuojie Framework\1033″下再次运行了“C:\Program Files\Microsoft Visual Studio 9.0\Common7\IDE\devenv.exe /setup” 命令。完成了我要运行的效果,如图:

具体操作步骤:

1.在”C:\Program Files\Microsoft Visual Studio 9.0\Common7\IDE\ProjectTemplates\CSharp\” 新建Tuojie Framework

2.根据“http://msdn.microsoft.com/zh-cn/library/xkh1wxd8.aspx”生成模板。

3.将模板拷贝到”C:\Program Files\Microsoft Visual Studio 9.0\Common7\IDE\ProjectTemplates\CSharp\Tuojie Framework\1033″

4.运行”C:\Program Files\Microsoft Visual Studio 9.0\Common7\IDE\devenv.exe /setup” 命令

5.重启VS2008。

[转载]easyui 1.2.4 +aspnet mvc常见问题

mikel阅读(953)

[转载]easyui 1.2.4 +aspnet mvc常见问题 – philzhou – 博客园.

1. form提交回调函数无法触发,服务器端返回json被浏览器获取。

function saveUser() {
        $('#fm').form('submit', {
            url: url,
            onSubmit: function () {
                return $(this).form('validate');
            },
            success: function (result) {                
                var result = eval('(' + result + ')');
                if (result.success) {
                $('#dlg').dialog('close');      // close the dialog   
                $('#dg').datagrid('reload');    // reload the user data   
                } else {
                $.messager.show({
                title: 'Error',
                msg: result.msg
                });
                }                                
            }           
        });
      }

服务器端代码

public JsonResult AddCustomer(Customer cust)
        {
            string result = "";
            try
            {
                TestEntities data = new TestEntities();
                data.AddToCustomers(cust);
                data.SaveChanges();
                result = "成功";
            }
            catch (Exception ex)
            {
                result = ex.Message;
            }

            return this.Json(new { success = true }, JsonRequestBehavior.AllowGet);
        }

该Action返回的Json直接被浏览器截获了,而没有触发前端ajax的回调函数。

解决办法:

return this.Json(new { success = true },"text/html", JsonRequestBehavior.AllowGet);

2.  easyui 1.2.4 bug 在一个允许多选的datagrid中删除了选中的某一行记录,并reload datagrid数据之后, 发现该已删除的记录任然存在于getSelections返回的row中,并且是第一行即如果getSelected会发现返回的时已被删除的那条记录。

解决方法:

重新加载数据前先清除 Selections

$('#test').datagrid("clearSelections");