Easyui + jQuery表单提交 给 Controller patr1

2014-11-15  总结上周在公司开发所用到的技术，由于是刚找的工作(一个大三实习生)+自己的技术菜，有很多地方都是怎么想就怎么实现的，

如果你有什么更好的解决方法，在看见这篇博客的时候，希望你能指点小弟，小弟在这先谢过了！

用到 jQuery ui 的部件  有三个分别是：

easyui-layout 、earyui-datagrid 、easyui-dialog（以前都没学过，只能算是边用边学）

实现的功能是(由于是用公司的架构做的，这里不贴图片，我手动画个大概演示就可以了)一个员工点餐管理系统：

主要实现的饭店管理功能就是datagrid 的数据显示，分页，新增 编辑 删除等功能。

主要实现了  选择中间的饭店名称，右边能显示对应饭店的菜单并且实现对应饭店的增加、修改和删除功能。

由于所用的部件都相同，这里我就总结菜单管理，相对别的界面，技术稍加难点！

我首先把我遇到的问题给列出来(你刚刚接触eary ui是否也遇到了这些问题，不防提出来共同讨论)：

1.datagrid的属性如何使用的问题：

2.datagrid如何获取后台数据的问题：

3.传值的问题：

4.布局及其分页的问题：

下面我就围绕这四点来展开总结，希望各位给指点下。

第一点 不是什么难点，下载 eary ui 的 API 就可以了(这里不贴) ，有对应的例子(而且讲的非常的详细)请： 官网地址：http://www.jeasyui.com/

第二点 我得详细的总结下，希望圆子里有更好的传值方法给哥们指导指导 ：

先贴代码：

 @{
     Layout = null;
 }
 <div id="Menulayout" class="easyui-layout" style="width: 1200px; height: 100%;">
     <div data-options="region:'west',title:'店铺',split:true" style="width: 300px;">
         <table id="MenuOrder" style="width: 300px; height: 620px;">
         </table>
     </div>
     <div data-options="region:'center',title:'菜单列表'" style="border: 0px; padding: 5px;
         background: #eee; width: 60%; height: 100%">
         <table id="MenuList" style="height: 620px; width: 900px; overflow: auto" fit="true">
         </table>
     </div>
 </div>
 <!--下面写个弹窗-->
 <div id="DIVFrom" class="easyui-dialog" closed="true" style=" background:#FFE4B5; width: 400px; height: 280px; padding: 10px 20px;">

      <div class="ftitle">
         菜单信息
         <!--新增饭店的信息-->
     </div>

     <form id="EditMenuFrom" method="post">
                 <div class="fitem">
                    <label> 菜名：</label>
                     <input name="Menu_name" id="Menu_name" class="easyui-validatebox"/>
                 </div>
                 <div class="fitem">
                    <label> 价格：</label>
                     <input name="Menu_price" id="Menu_price" class="easyui-validatebox"/>
                 </div>  

                  <div class="fitem">
                      <input name="House_name" id="House_name" class="easyui-validatebox" type='hidden' />
                  </div>
                         <input name="Menu_id" type='hidden' />
     </form>
 </div>
 <script type="text/javascript" charset="utf-8">

  function FromDIV(mode,name) {
      if (mode == 'add') {
            // alert(name);
             var House = $("#House_name").val();
             $('#EditMenuFrom').form('clear');
             $("#House_name").val(name);//往House_name 的input 标签写入数据

             $('#DIVFrom').dialog({ closed: false, title: '新增菜单信息' });
             $('#MenuList').datagrid('clearSelections');
             return;
         };

         if (mode == 'update') {
             var rows = $('#MenuList').datagrid('getSelections');
             if (rows.length == 0) {
                 $.messager.alert('错误', '请选择要修改饭店');
                 $('#MenuList').datagrid('clearSelections');
                 return;
             }
             if (rows.length == 1) {
                 $('#EditMenuFrom').form('clear');
                 $('#EditMenuFrom').form('load', {//加载本地记录
                     Menu_id: rows[0].Menu_id,
                     Menu_name: rows[0].Menu_name,
                     Menu_price: rows[0].Menu_price,
                     House_name: rows[0].House_name
                     //   House_Menu_id: rows[0].House_Menu_id
                     // isdelete: rows[0].IsDelete        string Menu_id, string Menu_name, string Menu_price, string House_Menu_id

                 });
                 $('#DIVFrom').dialog({ closed: false, title: '修改饭店信息' });
                 $('#Menu_id').datagrid('clearSelections');
             }
             else {
                 $.messager.alert('错误', '您选择了太多的饭店修改');
                 $('#Menu_id').datagrid('clearSelections');
             }
             return;
         };

     };
  $('#MenuOrder').datagrid({
         url: '/MenuOrderManage/GetOrderName',
         fitColumns: true, //数据列自适应宽度
         //  nowrap: true, //自动换行
         border: true, //边框显示
         idField: 'House_id', //唯一主键
         sortName: 'House_id',
         singleSelect: true,
         clear: false,
         columns: [[
                  {
                      field: 'House_name',
                      title: '饭店名',
                      width: 180
                  }
           ]]
           ,
             onDblClickRow: function (rowIndex, rowData) {//在用户双击一行时发生
            // alert(rowData.House_name);
              PostSelectValue(rowData.House_name); //-------------//House_name-->name
             $('#MenuList').datagrid('clearSelections');//清除所选的参数

             //  MenuLoad(null);
         }

     });

     /*获取选择行*/
 function PostSelectValue(name) {//-------
         // alert(House_name + "house——name");
         var rows = $('#MenuOrder').datagrid('getSelections');
         if (rows.length == 0) {
             $.messager.alert('错误', '请先选择行');
             // $("#MenuOrder").datagrid({ url: '/MenuOrderManage/AddMenu?House_name=' + rows[0].House_name });
             // $('#MenuOrder').datagrid('clearSelections');
             return;
         }
         else {
             $("#House_id").val(rows[0].House_id);
             if (rows.length == 1) {
                 // alert("这里是选择行的id    ==="+rows[0].House_id);
                 // alert(rows[0]).House_id+" ");
                 //   $("#MenuOrder").datagrid({ url: '/MenuOrderManage/AddMenu?House_name=' + rows[0].House_name });
                 //  $("#MenuList").datagrid({ url: '/MenuOrderManage/GetMenuOrders?Houshe_name=' + rows[0].House_name }); //向MenuOrderManage/GetMenuOrders对应方法中传递House_name参数
                 MenuLoad(rows[0].House_id,name);
             }
             return;
         }
     }

     function MenuLoad(House_id, name) {
        $("#MenuList").datagrid({
             url: '/MenuOrderManage/GetMenuOrders?House_id=' + House_id, //获取数据的链接
             pagination: true, //是否有分页栏
             pageSize: 20, //每页显示数据条数
             pageList: [20, 40, 60, 80], // 初始化每页显示条数
             fitColumns: false, //数据列自适应宽度
             border: false, //边框显示
             idField: 'Menu_id', //唯一主键
             sortName: 'Menu_id',
             singleSelect: true,
             sortOrder: 'asc',
             toolbar: [{
                 text: "新增",
                 iconCls: 'icon-add',
                 handler: function () {
                     FromDIV('add', name);
                   //  alert(name);//-----------------------------------------------------------------
                 }
             }, '-', {
                 text: "编辑",
                 iconCls: 'icon-edit',
                 handler: function () {
                     FromDIV('update', name);
                 }
             }, '-', {
                 text: "删除",
                 iconCls: 'icon-delete',
                 handler: function () {
                     deptdel();
                 }
             }],
             columns: [[
             {
                 field: 'Menu_name',
                 title: '菜名',
                 align: 'center',
                 width: 500,
                 sortable: true
             },
             {
                 field: 'Menu_price',
                 title: '价格',
                 align: 'center',
                 width: 300,
                 sortable: true
             }
         ]]

         });
        $('#DIVFrom').show().dialog({
             title: '标题--',
             closed: true,
             modal: true,
             buttons: [{
                 text: '保存',
                 handler: function () {
                  //   alert("保存");
                     $('#EditMenuFrom').submit();
                     $('.validatebox-tip').remove();
                 }
             }, {
                 text: '关闭',
                 handler: function () {
                     $('#DIVFrom').dialog({ closed: true });
                     $('.validatebox-tip').remove();
                 }
             }],
             onClose: function () { //$('#OrderMenumanage_form').find('input').val('');
                 $('.validatebox-tip').remove();
             }
         });
         $('#EditMenuFrom').form({
             url: '/MenuOrderManage/AddMenu',
             success: function (data) {
                 data = $.parseJSON(data);
                 if (data && data.success) {
                     $.messager.alert('提示------', data.message, 'info', function () {
                         $('#EditMenuFrom').find('input').val('');
                         $('#DIVFrom').dialog({ closed: true });
                         //alert("进入AddMenu");
                         deptcls();
                     });
                     NewUpdata();
                 }
                 else {
                     $.messager.alert('提示', data.message);
                 }
             }
         });
        /*删除删除行*/
         var deptdel = function () {
             //getSelections
             var rows = $('#MenuList').datagrid('getSelections');
             if (rows.length == 0) {
                 $.messager.show({
                     msg: '请选择要删除的数据行',
                     title: '提示'
                 });
                 return;
             }
             $.messager.confirm('删除提示', '您是否删除选择数据行数据?', function (r) {
                 if (r) {
                     for (var i = 0; i < rows.length; i++) {
                         $.ajax({
                             type: "POST",
                             url: "/MenuOrderManage/DelMenuOrder",
                             data: "Menu_id=" + rows[i].Menu_id,
                             success: function (data) {
                                 if (data.success == false) {
                                     $.messager.alert('提示', data.Message);
                                     return;
                                 }
                             }
                         });
                     }
                     $.messager.alert('提示', '删除成功');
                     NewUpdata();
                 }
                 else {
                     $('#MenuList').datagrid('clearSelections');
                     return;
                 }
             });
         };

     }
     /*清除查询框并刷新表格*/
     function NewUpdata(){
         $('#MenuList').datagrid('load', {});
         //$('#DIVFrom').find('input').val('');
     };

 </script>

CSS+ JQuery Eary UI

我把这张图片再次贴在了这里，是为了大家看着方便，根据图片能更好、快的理解代码(并且做了标注)

接下来我就慢慢的说道说道

做之前我没有认真的考虑，从右往左(现在回想起来都觉得自己SB)，我还是把先前的第一遍代码也贴出来，让大家看看(希望大家别犯跟我相同的错误)

搞的bug一大片，浏览器也不兼容，调试1天也没解决。最后我果断从新编写！

 @{
     Layout = null;
 }
 <div id='fdsfsd' class="easyui-layout" fit="true" border="false">

     <div data-options="region:'center',title:'餐馆列表'" style="padding: 0px;background-color:#CF9814;border:0px"
         border="false">
         <table id="House_id">
         </table>
     </div>
 </div>

 <div id="deptinfo" class="easyui-dialog" style="width: 400px; height: 280px; padding: 10px 20px;background-color: White" closed="true">

     <div class="ftitle">
         饭店信息 <!--新增饭店的信息--></div>
     <form id="Ordermanage_form" method="post">
     <div class="fitem">

       <!--  <input id="showunits" class="easyui-combobox" name="strunitid" type="text" />-->

     </div>
     <div class="fitem">
         <label>饭店名称：</label>
          <!-- string House_id,string House_name, string House_phone, string House_message, string House_address, string House_Menu_id-->
         <input name="House_name" id="House_name" class="easyui-validatebox" data-options="required:true" />
     </div>

        <div class="fitem">
         <label>电话号码：</label>
         <input name="House_phone" id="House_phone" class="easyui-validatebox" data-options="required:true" />
     </div>
        <div class="fitem">
         <label>详细地址：</label>
         <input name="House_address" id="House_address" class="easyui-validatebox" data-options="required:true" />
     </div>

     <input name="House_id" type='hidden' />
     </form>
 </div>

 <script charset="utf-8">

     /*清除查询框并刷新表格*/
     var deptcls = function () {
         $('#House_id').datagrid('load', {});
         $('#dm_gl').find('input').val('');
     };

     /*查询*/
     var Housetcx = function () {
         $('#House_id').datagrid('load', {
             House_name: $('#em_gl').find('[House_name=House_name]').val(),
             House_id: $('#em_gl').find('[name=House_id]').val()
         });
     };

     var deptinfo = function (mode) {
         if (mode == 'add') {
             $('#Ordermanage_form').form('clear');
             $('#deptinfo').dialog({ closed: false, title: '新增饭店信息' });
             $('#House_id').datagrid('clearSelections');
             return;
         };

         if (mode == 'update') {
             var rows = $('#House_id').datagrid('getSelections');
             if (rows.length == 0) {
                 $.messager.alert('错误', '请选择要修改饭店');
                 $('#House_id').datagrid('clearSelections');
                 return;
             }
             if (rows.length == 1) {
                 $('#Ordermanage_form').form('clear');
                 $('#Ordermanage_form').form('load', {//加载本地记录
                     House_id: rows[0].House_id,
                     House_name: rows[0].House_name,
                     House_message: rows[0].House_message,
                     House_phone: rows[0].House_phone,
                     House_address: rows[0].House_address
                    // isdelete: rows[0].IsDelete          string House_id,string House_name, string House_phone, string House_message, string House_address, string House_Menu_id

                 });
                 $('#deptinfo').dialog({ closed: false, title: '修改饭店信息' });
                 $('#House_id').datagrid('clearSelections');
             }
             else {
                 $.messager.alert('错误', '您选择了太多的饭店修改');
                 $('#House_id').datagrid('clearSelections');
             }
             return;
         };

     };

     /*删除删除行*/
     var deptdel = function () {
         //getSelections
         var rows = $('#House_id').datagrid('getSelections');
         if (rows.length == 0) {
             $.messager.show({
                 msg: '请选择要删除的数据行',
                 title: '提示'
             });
             return;
         }
         $.messager.confirm('删除提示', '您是否删除选择数据行数据?', function (r) {
             if (r) {
                 for (var i = 0; i < rows.length; i++) {
                     $.ajax({
                         type: "POST",
                         url: "/OrderManage/DelOrder",
                         data: "House_id=" + rows[i].House_id,
                         success: function (data) {
                             if (data.success == false) {
                                 $.messager.alert('提示', data.Message);
                                 return;
                             }
                         }
                     });
                 }
                 $.messager.alert('提示', '删除成功');
                 deptcls();
             }
             else {
                 $('#House_id').datagrid('clearSelections');
                 return;
             }
         });
     };

     $(function () {
         $("#House_id").datagrid({
             url: '/OrderManage/GetOrders', //获取数据的链接
             //title: '部门列表',// 标题
             pagination: true, //是否有分页栏
             pageSize: 20, //每页显示数据条数
             pageList: [20, 40, 60, 80], // 初始化每页显示条数
             fit: false, //自适应表格大小
             fitColumns: true, //数据列自适应宽度
             nowrap: true, //自动换行
             border: true, //边框显示
             idField: 'House_id', //唯一主键
             sortName: 'House_id',
             sortOrder: 'asc',
             singleSelect: true,
             toolbar: [{
                 text: "新增",
                 iconCls: 'icon-add',
                 handler: function () { deptinfo('add'); }
             }, '-', {
                 text: "编辑",
                 iconCls: 'icon-edit',
                 handler: function () { deptinfo('update'); }
             }, '-', {
                 text: "删除",
                 iconCls: 'icon-delete',
                 handler: function () { deptdel(); }
             }],
             columns: [[

             {
                 field: 'House_name',
                 title: '饭店名称',
                 align: 'center',
                 width: 50,
                 sortable: true
             },
             {
                 field: 'House_phone',
                 title: '联系电话',
                 align: 'center',
                 width: 50,
                 sortable: true
             },
             {
                 field: 'House_address',
                 title: '详细地址',
                 align: 'center',
                 width: 50,
                 sortable: true

             }

             ]]

         });

         $('#deptinfo').show().dialog({
             title: '标题--',
             closed: true,
             modal: true,
             buttons: [{
                 text: '保存',
                 handler: function () {
                     $('#Ordermanage_form').submit();
                     $('.validatebox-tip').remove();
                 }
             }, {
                 text: '关闭',
                 handler: function () {
                     $('#deptinfo').dialog({ closed: true });
                     $('.validatebox-tip').remove();
                 }
             }],
             onClose: function () { //$('#Ordermanage_form').find('input').val('');
                 $('.validatebox-tip').remove();
             }
         });

         $('#Ordermanage_form').form({
             url: '/OrderManage/AddHouse',
             success: function (data) {
                 data = $.parseJSON(data);
                 if (data && data.success) {
                     $.messager.alert('提示------', data.message, 'info', function () {
                         $('#Ordermanage_form').find('input').val('');
                         $('#deptinfo').dialog({ closed: true });
                         deptcls();
                     });
                 }
                 else {
                     $.messager.alert('提示', data.message);
                 }
             }
         });

         $('#strdeptname').validatebox({
             required: true,
             tipPosition: 'right'
         });

         $('#showunits').combobox({
             url: '/UnitsManage/GetUnitList',
             required: true,
             editable: false,
             tipPosition: 'right',
             width: 150,
             valueField: 'House_name',
             textField: 'House_id'
         });
     });
 </script>

有bug的代码 混乱

下面就讲解我从左往右的思路：

首先我把左边的饭店名称给显示出来 对应代码(如下)：

url：... 对应后台控制器

其它的属性代码中有详细的注释

 $('#MenuOrder').datagrid({
         url: '/MenuOrderManage/GetOrderName',
         fitColumns: true, //数据列自适应宽度
         //  nowrap: true, //自动换行
         border: true, //边框显示
         idField: 'House_id', //唯一主键
         sortName: 'House_id',
         singleSelect: true,
         clear: false,
         columns: [[
                  {
                      field: 'House_name',
                      title: '饭店名',
                      width: 180
                  }
           ]]
           ,
             onDblClickRow: function (rowIndex, rowData) {//在用户双击一行时发生
            // alert(rowData.House_name);
              PostSelectValue(rowData.House_name); //-------------//House_name-->name
21             $('#MenuList').datagrid('clearSelections');//清除所选的参数

          }

     });

然后就是    当用户双击  饭店名称书  得把对应饭店的菜单显示在  MenuList 表格中 ， 这里用到了 datagrid部件里的事件(onDblClickRow)

在这双击的过程中我把所选择的饭店名称的值给传递给 MenuList 表   所以就用到了 datagrid的两个参数 rowIndex，rowData(如果你不知道，请转API)

PostSelectValue方法对应的代码 ：  (这里有个小的转变  就是PostSelectValue(rowData.House_name) )

rowsData 传递的是整个对象，然而我只需要 饭店名称，所以就 .House_name 了

    /*获取选择行*/
 function PostSelectValue(name) {//-------
         // alert(name + "house——name");
         var rows = $('#MenuOrder').datagrid('getSelections');
         if (rows.length == 0) {
             $.messager.alert('错误', '请先选择行');             return;
         }
         else {
             $("#House_id").val(rows[0].House_id);
             if (rows.length == 1) {                 MenuLoad(rows[0].House_id,name);
             }
             return;
17         }
18     }

这里的 PostSelectValue 我把它设置成了不是初始化就能调用，而是双击才能调用，这样可以很好的控制代码的执行顺序

我为什么把MenuLoad(rows[0].House_id,name);的House_id也传递过来，是由于我数据库设置的局限性问题，这里不是论述话题

    function MenuLoad(House_id, name) {
        $("#MenuList").datagrid({
             url: '/MenuOrderManage/GetMenuOrders?House_id=' + House_id, //获取数据的链接
             pagination: true, //是否有分页栏
             pageSize: 20, //每页显示数据条数
             pageList: [20, 40, 60, 80], // 初始化每页显示条数
             fitColumns: false, //数据列自适应宽度
             border: false, //边框显示
             idField: 'Menu_id', //唯一主键
             sortName: 'Menu_id',
             singleSelect: true,
             sortOrder: 'asc',
             toolbar: [{
                 text: "新增",
                 iconCls: 'icon-add',
                 handler: function () {
                     FromDIV('add', name);
                   //  alert(name);//-----------------------------------------------------------------
                 }
             }, '-', {
                 text: "编辑",
                 iconCls: 'icon-edit',
                 handler: function () {
                     FromDIV('update', name);
                 }
             }, '-', {
                 text: "删除",
                 iconCls: 'icon-delete',
                 handler: function () {
                     deptdel();
                 }
             }],
             columns: [[
             {
                 field: 'Menu_name',
                 title: '菜名',
                 align: 'center',
                 width: 500,
                 sortable: true
             },
             {
                 field: 'Menu_price',
                 title: '价格',
                 align: 'center',
                 width: 300,
                 sortable: true
             }
         ]]

         });
        $('#DIVFrom').show().dialog({
             title: '标题--',
             closed: true,
             modal: true,
             buttons: [{
                 text: '保存',
                 handler: function () {
                  //   alert("保存");
                     $('#EditMenuFrom').submit();
                     $('.validatebox-tip').remove();
                 }
             }, {
                 text: '关闭',
                 handler: function () {
                     $('#DIVFrom').dialog({ closed: true });
                     $('.validatebox-tip').remove();
                 }
             }],
             onClose: function () { //$('#OrderMenumanage_form').find('input').val('');
                 $('.validatebox-tip').remove();
             }
         });

function MenuLoad(House_id, name)

至于新增，修改，删除  上面给出了代码。这里就不贴对应的代码了，为了让你快速的知道

我把对应定义的方法名称给解释一边  function FromDIV(mode,name) 就是控制 新增，修改的方法。传递的 name就是所对应的饭店名称

这样只要双击了左边的饭店名称，右边的隐藏字段 <input name="House_name" id="House_name" class="easyui-validatebox" type='hidden' />

就可以获得 饭店的名称，这样就可以把菜单新增到对应的饭店中。

其它的传值方法有   $("#MenuOrder").datagrid({ url: '/MenuOrderManage/AddMenu?House_name=' + rows[0].House_name });

往控制器传递进去，然后在把整个 对应的对象数据给拿出来，再传递回来(开始我就用这这方法)

         [HttpPost]
         public JsonResult AddMenu(string Menu_id, string Menu_name, string Menu_price, string House_name)
          {
                  //职业道德，这里的代码就不贴了 ，  愿博友体谅！
           }

今天就写到这里，以后想到更好的方法会来修正，当你看见这篇博客的时候，希望你也给给建议(不腻赐教)

由于本人是刚刚学 JQuery   ，有过错的地方希望大家提出来，有问题请留言！

今天晚上把上次没有写完的给完成 ：

首先我得把我遇到的几个问题给列出来，这样更容易让自己以及读者快速对文章一目了然！

1、数据库时间在web页面显示的问题

2、获取datagrid某一列的所有值问题

3、datagrid中的checkbox选择问题

  { field: 'clist_time', title: '时间', width: 200, formatter: function (value) {
                 if (value == null || value == '') {
                     return '';
                 }
                 var dt;
                 if (value instanceof Date) {
                     dt = value;
                 }
                 else {
                     dt = new Date(value);
                     if (isNaN(dt)) {
                         value = value.replace(/\/Date\((-?\d+)\)\//, '$1'); //标红的这段是关键代码，将那个长字符串的日期值转换成正常的JS日期格式
                         dt = new Date();
                         dt.setTime(value);
                     }
                 }
                 return dt.format("yyyy-MM-dd hh:mm:ss");   //这里用到一个javascript的Date类型的拓展方法，这个是自己添加的拓展方法，在后面的步骤3定义
             }
             }

 /**
     * 时间对象的格式化;
     */
     Date.prototype.format = function (format) {
         /*
         * eg:format="YYYY-MM-dd hh:mm:ss";
         */
         var o = {
             "M+": this.getMonth() + 1,  //month
             "d+": this.getDate(),     //day
             "h+": this.getHours(),    //hour
             "m+": this.getMinutes(),  //minute
             "s+": this.getSeconds(), //cond
             "q+": Math.floor((this.getMonth() + 3) / 3),  //quarter
             "S": this.getMilliseconds() //millisecond
         }

         if (/(y+)/.test(format)) {
             format = format.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
         }

         for (var k in o) {
             if (new RegExp("(" + k + ")").test(format)) {
                 format = format.replace(RegExp.$1, RegExp.$1.length == 1 ? o[k] : ("00" + o[k]).substr(("" + o[k]).length));
             }
         }
         return format;
     };

JS格式化日期代码

      onLoadSuccess: function (data) {
             var rows = data.rows;
             var productis = [];
             var price = 0;
             $(rows).each(function () {
                 price += this.clist_price;//汇总
                 productis.push(this.clist_price);
             });
             $('#priceId').html(price);

获取某一列的值，并且显示在某个label标签上

        field: 'isVisible', checkbox: true ,
           //   {   field: 'isVisible',
                 title: '选择饭店'
 主要是弄了个延迟加载数据，这样，选择的就不会不勾上
   onLoadSuccess:function (data){
                 var selectRow;
                if(data){
                  $.each(data.rows,function (index,item){

                              if(item.isVisible==1){

                                 selectRow=index;

                                }
                                 });
           timer = setInterval("handler(" +selectRow + ")", 10);

                }
             }

3、checkbox

这里是开发中用到的视图 语句

 select clist_id,menu_name, SUM(clist_price) AS clist_price,
 GROUP_CONCAT(employee_loginName) AS employee_loginName ,SUM(list_number)
 AS list_number,clist_time,SUM(employee_number) as employee_number from t_checklist
 WHERE clist_time BETWEEN (SELECT ADDDATE(now(),INTERVAL - HOUR)) AND (SELECT ADDDATE(now(),INTERVAL  HOUR))
  GROUP BY menu_name 

表单提交：

 CSS

     <form id="Restaurant_form" method="post">
     <div class="fitem">
         <!--  <input id="showunits" class="easyui-combobox" name="strunitid" type="text" />-->
     </div>
     <div class="fitem">
         <label>
             饭店名称：</label>
         <!-- string House_id,string House_name, string House_phone, string House_message, string House_address, string House_Menu_id-->
         <input name="House_name" id="House_name" class="easyui-validatebox" required="required"
             validtype="" />
     </div>
     <div class="fitem">
         <label>
             电话号码：</label>
         <input name="House_phone" id="House_phone" class="easyui-validatebox" data-options="required:true"
             required="required" validtype="Mobile" />
     </div>
     <div class="fitem">
         <label>
             详细地址：</label>
         <input name="House_address" id="House_address" class="easyui-validatebox" data-options="required:true"
             required="required" />
     </div>
     <input name="House_id" type='hidden' />
     </form>

 jQuery 提交给控制器：

     $('#Restaurant_form').form({
         url: '/RestaurantManage/editHouse',
         success: function (data) {
             data = $.parseJSON(data);
             if (data && data.success) {
                 $.messager.alert('提示------', data.message, 'info', function () {
                     $('#Restaurant_form').find('input').val('');
                     $('#DIVformRestaurant').dialog({ closed: true });
                     newTable();
                 });
             }
             else {
                 $.messager.alert('提示', data.message);
             }
         }
     });

表单提交

+

     function RestaurantSubmit() {
         $('#DIVformRestaurant').dialog({
             title: '',
             closed: false,
             modal: true,
             buttons: [{
                 text: '保存',
                 handler: function () {
                     $('#Restaurant_form').submit();
                     $('.validatebox-tip').remove();
                 }
             }, {
                 text: '关闭',
                 handler: function () {
                     $('#DIVformRestaurant').dialog({ closed: true });
                     $('.validatebox-tip').remove();
                 }
             }],
             onClose: function () { //$('#Ordermanage_form').find('input').val('');
                 $('.validatebox-tip').remove();
             }
         });
     }

声明： 本文来自博客园知鸟博客，转载请标明出处： www.cnblogs.com/izhiniao