EasyUI实现上下移动

本文展示了如何使用 EasyUI 在数据网格中实现行的上下移动功能。通过JavaScript函数`moveup`和`movedown`,在用户未编辑状态下,允许对选中的行进行上移或下移操作。同时,提供了添加、删除和编辑数据的函数,以及搜索和筛选功能。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

<title>热点推荐设置</title>
        <link rel="stylesheet" href="ui/base.css" type="text/css" />
  <LINK rel="stylesheet" href="../themes/default/easyui.css">
  <LINK rel="stylesheet" href="../themes/icon.css">
  <script type="text/javascript" src="../js/jquery.js"></script>
  <script type="text/javascript" src="../js/easyui.js"></script>
  <script type="text/javascript" src="../js/easyui-lang-zh_CN.js"></script>
        <script type="text/javascript" src="../js/json.js"></script>
        <style>
        .datagrid-view2
        {
            left:0px;
            }
        </style>
  <script>

      var lastIndexp;
      var tempindexp = -1;
      var isEditep = false; //是否为编辑状态,默认 未编辑
      var lastIndexc;
      var tempindexc = -1;
      var isEditec = false; //是否为编辑状态,默认 未编辑
      $(function () {
          loadgrid();
          $("#btnsel").click(function () {
              var params = $('#parenttable').datagrid('options').queryParams; params.name = encodeURI($("#selname").val());
              params.type = encodeURI($("#seltype").val());
              params.fanwei = encodeURI($("#selfanwei").val());

              $('#parenttable').datagrid('reload')
          });

 

      });
      function loadgrid() {
          var typedata = [{ name: "线路", value: "线路" }, { name: "租车", value: "租车" }, { name: "酒店", value: "酒店" }, { name: "签证", value: "签证" }, { name: "导游", value: "导游" }, { name: "机票", value: "机票" }, { name: "门票", value: "门票" }, { name: "图库", value: "图库"}];
          var fanweidata = [{ name: "通用", value: "通用" }, { name: "国内", value: "国内" }, { name: "省内", value: "省内" }, { name: "出境", value: "出境"}];
          $('#parenttable').datagrid({
              iconCls: 'icon-edit',
              width: '900',
              striped: true,
              fitColumns: true,
              collapsible: true,
              url: "/tourmall/AjaxSource/HotnavAjax.aspx",
              singleSelect: true,
              pagination: true,
              pageList: [20],

              columns: [[

  {
      field: 'XuHao', title: '序号', width: 50, align: 'center'
  },
  {
      field: 'Name', title: '一级栏目', width: 100, align: 'center', editor: { type: 'text', options: { validType: 'length[1,6]', required: true} }
  },
  {
      field: 'Url', title: '链接地址', width: 400, align: 'center', editor: 'text', formatter: function (value) {
          var s = "<div style='text-align:left;width:100%'><a href='" + value + "' target='_blank' >" + value + "</a></div>"
          return s;
      }
  },
  {
      field: 'Type', title: '类型', width: 100, align: 'center', editor: { type: 'combobox', options: { valueField: 'value', textField: 'name', data: typedata, required: true, editable: false} }
  },
  {
      field: 'FanWei', title: '范围', width: 100, align: 'center', editor: { type: 'combobox', options: { valueField: 'value', textField: 'name', data: fanweidata, required: true, editable: false} }
  },
  { field: 'action', title: '操作', width: 145, align: 'center',
      formatter: function (value, row, index) {
          if (row.editing) {
              var s = '<a href="#" onclick="saverow(\'parenttable\',' + index + ')">保存</a> ';
              var c = '<a href="#" onclick="cancelrow(\'parenttable\',' + index + ')">取消</a>';
              return s + c;
          } else {
              var e = '<a href="#" onclick="editrow(\'parenttable\',' + index + ')">修改</a> ';

              var d = '<a href="#" onclick="DelOneRow(\'parenttable\',' + index + ',' + row.HotID + ')">删除</a>';
              var f = '&nbsp;<a href="#" onclick=chiddialog(' + JSON.stringify(row) + ')>二级栏目</a>';
              return e + d + f;
          }
      }
  }
  ]],

              onLoadSuccess: function (data) {
                  jsondata = data;
              },
              queryParams: {
                  "optype": "", "json": "", "deid": "", "name": "", "type": "", "fanwei": ""
              },
              onBeforeEdit: function (index, row) {
                  row.editing = true;
                  $('#parenttable').datagrid('refreshRow', index);
              },
              onAfterEdit: function (index, row) {

                  row.editing = false;

                  $('#parenttable').datagrid('refreshRow', index);

                  var ss = $("#parenttable").datagrid('getChanges');
                  var json = JSON.stringify(ss);

                  var params = $('#parenttable').datagrid('options').queryParams;
                  params.json = encodeURI(JSON.stringify(ss));
                  params.optype = "updata";
                  // alert(params.json)
                  var addIndex = $('#parenttable').datagrid('getRows').length - 1;
                  //if (index == addIndex) {
                  $('#parenttable').datagrid('reload');
                  params.json = "";
                  // }

              },
              onCancelEdit: function (index, row) {
                  row.editing = false;
                  $('#parenttable').datagrid('refreshRow', index);
              },
              onClickRow: function (rowIndex, row) {
                  tempindexp = rowIndex;
                  //if(lastIndex!=rowIndex) {
                  //     $('#parenttable').datagrid('endEdit',lastIndex);
                  //     $('#parenttable').datagrid('beginEdit',rowIndex);
                  //    }
                  lastIndexp = rowIndex;
              },
              //工具栏
              toolbar: [{
                  text: '添加',
                  iconCls: 'icon-add',
                  handler: function () {

                      adddialog();
                  }

              }, "-", {
                  id: "edite",
                  text: "保存",
                  iconCls: "icon-save",
                  handler: function () { savemorerow("parenttable") }
              }, '-', {
                  text: '上移',
                  iconCls: 'icon-add',
                  handler: function () {
                      moveup('parenttable', tempindexp, isEditep);
                  }
              }, '-', {
                  text: '下移',
                  iconCls: 'icon-add',
                  handler: function () {

                      movedown('parenttable', tempindexp, isEditep);
                  }
              }
  ]
          });
      }
      function editrow(objid, index) {
          if (objid == "parenttable") {
              $('#' + objid).datagrid('endEdit', lastIndexp);
          } else {
              $('#' + objid).datagrid('endEdit', lastIndexc);
          }

          $('#' + objid).datagrid('beginEdit', index);
          // if(lastIndex!=index) {
          //    
          //    }

      }
      function cancelrow(objid, index) {
          $('#' + objid).datagrid('cancelEdit', index);
          if (objid == "parenttable") {
              isEditep = false;
          } else {
              isEditec = false;
          }
      }
      function saverow(objid, index) {

          $('#' + objid).datagrid('endEdit', index);
          if (objid == "parenttable") {
              isEditep = false;
          } else {
              isEditec = false;
          }
      }
      function savemorerow(objid) {
          for (var i = 0; i < $('#' + objid).datagrid("getData").length; i++) {
              $('#' + objid).datagrid('endEdit', i);

          }
          if (objid == "parenttable") {
              isEditep = false;
          } else {
              isEditec = false;
          }

          var params = $('#' + objid).datagrid('options').queryParams;
          var rows = $('#' + objid).datagrid("getData");
          params.json = encodeURI(JSON.stringify(rows.rows));
          params.optype = "updata";

          $('#' + objid).datagrid('reload');

 

      }

      function DelOneRow(datatableID, index, id) {
          var params = $('#' + datatableID).datagrid('options').queryParams;
          //alert(id);

          $.messager.confirm('提示信息', '确定要删除吗?',
      function (r) {
          if (r) {
              $('#' + datatableID).datagrid('deleteRow', index);
              params.deid = id; //删除ID
              params.optype = 'delete';
              $('#' + datatableID).datagrid('reload');
          }
      });
      }
      /////////////////////////////////////////子节点
      function loadgridchid(rowtemp) {
          var typedata = [{ name: "线路", value: "线路" }, { name: "租车", value: "租车" }, { name: "酒店", value: "酒店" }, { name: "签证", value: "签证" }, { name: "导游", value: "导游" }, { name: "机票", value: "机票" }, { name: "门票", value: "门票" }, { name: "图库", value: "图库"}];
          var fanweidata = [{ name: "通用", value: "通用" }, { name: "国内", value: "国内" }, { name: "省内", value: "省内" }, { name: "出境", value: "出境"}];
          $('#chidtable').datagrid({
              iconCls: 'icon-edit',
              width: '700',
              striped: true,
              fitColumns: true,
              collapsible: true,
              url: "/tourmall/AjaxSource/HotnavAjax.aspx",
              singleSelect: true,
              pagination: true,
              pageList: [20],
              columns: [[

  {
      field: 'XuHao', title: '序号', width: 50, align: 'center'
  },
  {
      field: 'Name', title: '名称', width: 100, align: 'center', editor: { type: 'text', options: { validType: 'length[1,6]', required: true} }
  },
  {
      field: 'Url', title: '链接地址', width: 400, align: 'center', editor: 'text', formatter: function (value) {
          var s = "<div style='text-align:left;width:100%'><a href='" + value + "' target='_blank'>" + value + "</a></div>"
          return s;
      }
  },
  {
      field: 'Type', title: '类型', width: 100, align: 'center'
  },
  {
      field: 'FanWei', title: '范围', width: 100, align: 'center'
  },
  { field: 'action', title: '操作', width: 120, align: 'center',
      formatter: function (value, row, index) {
          if (row.editing) {
              var s = '<a href="#" onclick="saverow(\'chidtable\',' + index + ')">保存</a> ';
              var c = '<a href="#" onclick="cancelrow(\'chidtable\',' + index + ')">取消</a>';
              return s + c;
          } else {
              var e = '<a href="#" onclick="editrow(\'chidtable\',' + index + ')">修改</a> ';

              var d = '<a href="#" onclick="DelOneRow(\'chidtable\',' + index + ',' + row.HotID + ')">删除</a>';

              return e + d;
          }
      }
  }
  ]],

              onLoadSuccess: function (data) {
                  jsondata = data;
              },
              queryParams: {
                  "optype": "", "json": "", "deid": "", "itemid": rowtemp.HotID
              },
              onBeforeEdit: function (index, row) {
                  row.editing = true;
                  $('#chidtable').datagrid('refreshRow', index);
              },
              onAfterEdit: function (index, row) {

                  row.editing = false;

                  $('#chidtable').datagrid('refreshRow', index);

                  var ss = $("#chidtable").datagrid('getChanges');
                  var json = JSON.stringify(ss);

                  var params = $('#chidtable').datagrid('options').queryParams;
                  params.json = encodeURI(JSON.stringify(ss));
                  params.optype = "updata";
                  // alert(params.json)
                  var addIndex = $('#chidtable').datagrid('getRows').length - 1;
                  //if (index == addIndex) {
                  $('#chidtable').datagrid('reload');
                  params.json = "";
                  // }

              },
              onCancelEdit: function (index, row) {
                  row.editing = false;
                  $('#chidtable').datagrid('refreshRow', index);
              },
              onClickRow: function (rowIndex, row) {
                  tempindexc = rowIndex;
                  //if(lastIndex!=rowIndex) {
                  //     $('#chidtable').datagrid('endEdit',lastIndex);
                  //     $('#chidtable').datagrid('beginEdit',rowIndex);
                  //    }
                  lastIndexc = rowIndex;
              },
              //工具栏
              toolbar: [{
                  text: '添加',
                  iconCls: 'icon-add',
                  handler: function () {

                      adddialog(rowtemp);
                  }

              }, "-", {
                  id: "edite",
                  text: "保存",
                  iconCls: "icon-save",
                  handler: function () { savemorerow("chidtable") }
              }, '-', {
                  text: '上移',
                  iconCls: 'icon-add',
                  handler: function () {
                      moveup('chidtable', tempindexc, isEditec);
                  }
              }, '-', {
                  text: '下移',
                  iconCls: 'icon-add',
                  handler: function () {

                      movedown('chidtable', tempindexc, isEditec);
                  }
              }
  ]
          });
      }
      function chiddialog(row) {
          lastIndexc = -1;
          tempindexc = -1;
          isEditec = false; //是否为编辑状态,默认 未编辑
          loadgridchid(row);
          $('#chid_win').dialog({
              title: row.Name + "的二级栏目",
              modal: true,   //是否为模
              shadow: true //是否有遮盖层
          }).dialog("open");
      }
      function adddialog(itemid) {
          var row = itemid;
          if (row != 'undefined' && row != null && row.HotID > 0) {
              $('#type').val(row.Type);
              $('#fanwei').val(row.FanWei);
              $('#type').attr("disabled", "true");
              $('#fanwei').attr("disabled", "true");
          }
          $('#add_win').dialog({
              modal: true,   //是否为模
              shadow: true, //是否有遮盖层

              buttons: [{
                  text: '确定',
                  iconCls: 'icon-ok',
                  handler: function () {

                      Add(itemid);
                  }
              }, {
                  text: '取消',
                  handler: function () {
                      $('#add_win').dialog('close');
                  }
              }]
          }).dialog("open");

      }
      function Add(row) {
          var tempid = '';
          if (row != null) {
              tempid = row.HotID
          }
          //alert(JSON.stringify(row));
          var yz = ($("#name").validatebox('isValid') && $("#url").validatebox('isValid'))

          if (yz) {

              var name = $('#name').val();
              var url = $('#url').val();
              var type = $('#type').val();
              var fanwei = $('#fanwei').val();
              var dataurl = { "name": encodeURI(name), "hoturl": encodeURI(url), "type": encodeURI(type), "fanwei": encodeURI(fanwei), "itemid": tempid, "optype": "add" };
              $.ajax({ type: 'POST',
                  url: '/tourmall/AjaxSource/HotnavAjax.aspx',
                  data: dataurl,
                  success: function (data) {
                      if (data == "0") {
                          $.messager.alert("错误", "添加失败!", "error");
                      } else {
                          $.messager.alert("提示", "添加成功!", "info");
                      }
                  }
              });
          } else {
              $.messager.alert("错误", "请检查所录入的值是否正确!", "error");
          }
      }
      //////////////////////////排序 上下移动
      function moveup(objid, index, isEdite) {
          if (isEdite == false) {
              var data = $("#" + objid).datagrid("getData");
              if (index < 0) {
                  $.messager.alert("错误", "请先选择一条数据!", "error");
              } else if (index == 0) {
                  $.messager.alert("提示", "已经是第一行了!", "info");
              } else {
                  var temprow = data.rows[index];

                  data.rows[index] = data.rows[parseInt(index) - 1];
                  data.rows[parseInt(index) - 1] = temprow;

                  var temprowval = data.rows[index].OrderList;
                  data.rows[parseInt(index)].OrderList = data.rows[parseInt(index) - 1].OrderList;

                  data.rows[parseInt(index) - 1].OrderList = temprowval;
                  $("#" + objid).datagrid("loadData", data);
                  $("#" + objid).datagrid("selectRow", parseInt(index) - 1);
                  if (objid == "parenttable") {
                      tempindexp--;
                  } else {
                      tempindexc--;
                  }
                  var params = $("#" + objid).datagrid('options').queryParams;
                  var rows = $("#" + objid).datagrid("getData");

                  params.json = encodeURI(JSON.stringify(rows.rows));
                  params.optype = "updata";

              }
          }
          else {
              $.messager.alert("错误", "请先保存数据!", "error");
          }
      }
      function movedown(objid, index, isEdite) {

          if (isEdite == false) {
              var data = $("#" + objid).datagrid("getData");
              if (index < 0) {
                  $.messager.alert("错误", "请先选择一条数据!", "error");
              } else if (index == data.rows.length - 1) {
                  $.messager.alert("提示", "已经是最后一行了!", "info");
              } else {

                  var temprow = data.rows[index];
                  //移动行的索引 加1


                  data.rows[index] = data.rows[parseInt(index) + 1];
                  data.rows[parseInt(index) + 1] = temprow;

                  var temprowval = data.rows[index].OrderList;
                  data.rows[parseInt(index)].OrderList = data.rows[parseInt(index) + 1].OrderList;

                  data.rows[parseInt(index) + 1].OrderList = temprowval;

                  $("#" + objid).datagrid("loadData", data);

                  $("#" + objid).datagrid("selectRow", parseInt(index) + 1);
                  if (objid == "parenttable") {
                      tempindexp++;
                  } else {
                      tempindexc++;
                  }

                  var params = $("#" + objid).datagrid('options').queryParams;
                  var rows = $("#" + objid).datagrid("getData");

                  params.json = encodeURI(JSON.stringify(rows.rows));
                  params.optype = "updata";

              }
          }
          else {
              $.messager.alert("错误", "请先保存数据!", "error");
          }

      }
 
        </script>
 </HEAD>
 <body MS_POSITIONING="GridLayout">
  <form name="Form1" method="post" action="Sys_Hotnav.aspx" id="Form1">
<div>
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKLTUxMTcwNzgxMGRkGc6tWrz3FW5tlQFOjX6kM3UHp2i43jhLvnzjTZyyvQ4=" />
</div>
 
   <table width="500" align="center">
            <tr>
     <td ><br>
      
     </td>
    <tr>
     <td style="background-color:#efefef">
                    <div >搜索:
                      <select name="type" id='seltype'>
                     
                       <option value="" selected=true >所有</option>
                        <option value="线路">线路</option>
                        <option value="酒店">酒店</option>
                        <option value="租车">租车</option>
                        <option value="签证">签证</option>
                        <option value="导游">导游</option>
                        <option value="机票">机票</option>
                        <option value="门票">门票</option>
                        <option value="图库">图库</option>
                       
                      </select>&nbsp;
                      <select id='selfanwei'>
                         <option value="" selected>所有</option>
        <option value="通用" >通用</option>
        <option value="国内">国内</option>
        <option value="省内">省内</option>
        <option value="出境">出境</option>
       </select>
                           名称: <input id="selname" type="text" />&nbsp;
                            <input id="btnsel" type="button"  value="搜索"/>
                    </div>
      <table id="parenttable">
      </table>
     </td>
    </tr>
   </table>
            <div id="chid_win" class="easyui-dialog"  icon="icon-save" style="WIDTH:720px" closed="true">
            <table id="chidtable"></table>
    </div>
   <div id="add_win" class="easyui-dialog" title="添加/修改" icon="icon-save" style="WIDTH:400px"
    closed="true">
    <table border="0" cellspacing="0" align="center" cellpadding="0">
     <tr>
      <td width="50" height="30">名称:</td>
      <td width="300"><input id="name" class="easyui-validatebox" required="true" validType="length[1,6]">
       注:不能超过6个字</td>
     </tr>
     <tr>
      <td width="50" height="30">URL:</td>
      <td width="300"><input style="WIDTH:300px" class="easyui-validatebox" id="url" required="true" validType="url"></td>
     </tr>
     <tr>
      <td width="50" height="30">类型:</td>
      <td width="300"><select id='type'>
        
                        <option value="线路">线路</option>
                        <option value="酒店">酒店</option>
                        <option value="租车">租车</option>
                        <option value="签证">签证</option>
                        <option value="导游">导游</option>
                        <option value="机票">机票</option>
                        <option value="门票">门票</option>
                        <option value="图库">图库</option>
                       
       </select></td>
     </tr>
     <tr>
      <td width="50" height="30">范围:</td>
      <td width="300"><select id='fanwei'>
        <option value="通用" selected>通用</option>
        <option value="国内">国内</option>
        <option value="省内">省内</option>
        <option value="出境">出境</option>
       </select></td>
     </tr>
    </table>
   </div>
  </form>
 </body>
</HTML>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值