jQuery EasyUI 使用笔记
Posted Dang夏
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery EasyUI 使用笔记相关的知识，希望对你有一定的参考价值。
大家有四次抢票机会。第一次是放票时间之后的30分钟。第二次机会是开车前的15天。第三个机会是开车前的48小时。第四个机会是开车前的24小时。
$("#gys_key").combogrid("getValue")
$(\'#dtpDate\').datebox("getValue")
1.导入js
2.datagrid重新加载
3.弹出div,打开新页面
4.实现分页
5.双击
6.嵌套子表格
7.javascript刷新页面
导入JS,CSS
<link href="Themes/default/easyui.css" rel="stylesheet" type="text/css" />
<link href="Themes/default/easyui.su.css" rel="stylesheet" type="text/css" />
<link href="Themes/icon.css" rel="stylesheet" type="text/css" />
<script src="Scripts/jquery.min.js" type="text/javascript"></script>
<script src="Scripts/JQuery.cookie.js" type="text/javascript"></script>
<script src="Scripts/jquery.easyui.min.js" type="text/javascript"></script>
<script src="Scripts/JQuery.easyui.utility.js" type="text/javascript"></script>
<script src="Scripts/Login/JQuery.browser.js" type="text/javascript"></script>
<script src="Scripts/easyui-lang-zh_CN.js" type="text/javascript"></script>
<%-- <script src="Scripts/print_btn.js" type="text/javascript"></script>
<script src="Scripts/CommonFn.js" type="text/javascript"></script>--%>
<script src="Scripts/datagrid-detailview.js" type="text/javascript"></script>
<script src="Scripts/ajaxupload.3.5.js?v=1.1" type="text/javascript"></script>
--datagrid修改数量,uppnumber()要定义在.aspx文件里面
{ field: "qty", title: \'数量\', width: undefined, align: \'center\', sortable: true, formatter: function (value, row, index) {
if (row.gi_code != "页合计" && row.gi_code != "总合计") {
return \'<input name="pnumber" dno="\' + row.DNO + \'" value="\' + value + \'" type="text" style="width:78px;" class="easyui-numberbox" onChange="uppnumber(this.value,\' + row.DNO + \')"/>\';
}
else {
return value;
}
}
},
//修改数量
function uppnumber(qty, id) {
if (qty > 0) {
$.ajax({
url: url + "?action=pnumber",
type: "post",
data: { qty: qty, dno: id },
success: function (msg) {
//infoalert(msg);
$("#tb_PODetail").datagrid("reload"); //可以注释
}
});
}
else {
$(this).val("")
alert("采购数量要大于0!");
}
}
datagrid 重新加载 ?
// 加载，分页时会从第1页开始 $(\'#dg\').datagrid(\'load\', { code: \'01\', name: \'name01\' }); // 重新加载，分页时加载当前页数据，你要的刷新，应该是用这个，如果只是刷新，不需要参数，可以直接使用 $(\'#dg\').datagrid(\'reload\'); $(\'#dg\').datagrid(\'reload\', { code: \'01\', name: \'name01\' });
弹出div $("#div_Search").dialog("open");
打开页面 openModalDialog("GoodsEdit.aspx?code=" + row.code);
分页 Request.Form["page"]
Request.Form["rows"]
int start = ((Convert.ToInt32(Request.Form["page"].ToString().Trim()) - 1) * Convert.ToInt32(Request.Form["rows"].ToString().Trim())) + 1;
int end = (Convert.ToInt32(Request.Form["page"].ToString().Trim()) - 1) * Convert.ToInt32(Request.Form["rows"].ToString().Trim()) + Convert.ToInt32(Request.Form["rows"].ToString().Trim());
sql = "select * from( " + sql + ") as a where a.Ron between " + start + " and " + end;
返回json
//1 result2 = "{\\"total\\":" + "200" + ",\\"rows\\":" + result + "}"; total 总行数,rows 显示的row
//2 json += ",\\"pagetotal\\":\\"" + dt.Rows.Count + "\\",\\"skucount\\":\\"" + dt2.Rows.Count + "\\",\\"skutotal\\":\\"" + itotal + "\\"" + "}"; 自定义右下角显示的数据
//1 双击row
onDblClickRow: function (rowIndex, rowData) {
var row = $("#tb_GoodsList").datagrid("getSelected");
if (row != undefined) {
<%if(Otype=="1"){ %>
window.returnValue = row;
window.close();
<%}else{ %>
openModalDialog("GoodsEdit.aspx?" + "id=" + row.gi_id + "&tt=1");
$("#dg_GoodsList").datagrid(\'reload\');
<%} %>
}
}
//2 嵌套datagrid
view: detailview,
detailFormatter: function(index, row){
return \'<div style="padding:2px"><table id="ddv-\' + index + \'"></table></div>\';
},
onExpandRow: function(index, row){
$(\'#ddv-\'+index).datagrid({
url: url + "?action=detaillist&oid=" +row.pc_id,//后台Request["oid"]
fitColumns: false,
pagination: true,
pageSize: 15,
pageList: [15, 30, 90, 120],
showFooter: true,
striped: true,
rownumbers: true,
singleSelect: true,
autoRowHeight: true,
loadMsg:\'\',
height:\'auto\',
columns:[[
{ field: "pi_id", title: "id", hidden: true },
{ field: "gi_code", title: "商品编码", width: undefined, align: \'center\' },
{ field: "gi_shortname", title: \'商品简称\', width: undefined, align: \'center\' },
{ field: "gs_name", title: \'规格\', width: undefined, align: \'center\' },
{ field: "gi_unit", title: \'单位\', width: undefined, align: \'center\' ,sortable:true},
{ field: "gi_importprices", title: \'销售价\', width: undefined, align: \'center\' ,sortable:true},
{ field: "pi_kc", title: \'库存数量\', width: undefined, align: \'center\' },
// { field: "pi_jbkc", title: \'警戒库存\', width: undefined, align: \'center\' },
{ field: "pi_number", title: \'采购数量\', width: undefined, align: \'center\'},
{ field: "pi_price", title: \'采购单价\', width: undefined, align: \'center\'},
{ field: "pi_allmoney", title: \'总价\', width: undefined, align: \'center\'},
]],
onResize:function(){
$(\'#west_dg\').datagrid(\'fixDetailRowHeight\',index);
},
onLoadSuccess:function(){
setTimeout(function(){
$(\'#west_dg\').datagrid(\'fixDetailRowHeight\',index);
},0);
}
});
$(\'#west_dg\').datagrid(\'fixDetailRowHeight\',index);
}
1、使用这个subGrid的视图，需要使用到官网提供的datagrid-detailview.js，其中帮我们定义好了detailView这种显示视图。
在使用过程中，我们只需要在主datagrid中将默认的view用detailView替换掉就可以了。
2、detailFormatter，也就是生成的detail中的初始代码，这里放入一个table，之后可以将其动态创建成datagrid。
3、当主datagrid刚刚初始化完成时，并不显示subGrid，此时subGrid并没有存在的必要，我们也不去创建它。
那什么时候去创建它呢？当我们展开主datagrid中的某条数据的时候，也就是在onExpandRow事件中，才去创建一个它“管辖”的subGrid。
4、创建subGrid的方法和一般创建datagrid的方式差不多，但是后面多了一些fixDetailRowHeight的操作
fixDetailRowHeight这个方法主要是为了调整subGrid的高度用的，如若不加，可能会造成subGrid的高度会出现错位的情况。
不过这里setTimeout的时间为0，那和直接调用function又有什么区别呢？
7. function New2() {
window.location.reload();//刷新页面
//刷新页面，但是要手动清空
// history.go(0);
// $(\'#txtTax\').val(\'\');
// $(\'#txtpay\').val(\'\');
// $(\'#txtcurrency\').val(\'\');
// $(\'#gys_key\').combogrid.setValues(\'\');
}
以上是关于jQuery EasyUI 使用笔记的主要内容，如果未能解决你的问题，请参考以下文章